如何对齐我的HTML页面组件？_Html_Css

如何对齐我的HTML页面组件？

html css

如何对齐我的HTML页面组件？,html,css,Html,Css,我希望我的页面输出如下：但结果却是这样的：你能建议我做什么？代码是模板和CSS： BODY {background-image: url(/welcome/static/images/register_top2.png); background-repeat: repeat-x; } #content { width: 700px ; margin: 180 auto; } #content-container { width: 700px ; margin-left

我希望我的页面输出如下：

但结果却是这样的：

你能建议我做什么？代码是模板和CSS：

BODY {background-image: url(/welcome/static/images/register_top2.png); background-repeat: repeat-x; }
#content {
  width: 700px ;
  margin: 180  auto;

}
#content-container {
  width: 700px ;
  margin-left: 180px;  
}
#image-logo {
  float: right;
}
.has_errors { border: 1px solid #ff0000 }
.errors {color: #ff0000;}

      <!DOCTYPE hml>
                        <html>
                                <head>  <link rel="stylesheet" href="/welcome/static/css/register.css"/>

                                <STYLE TYPE="text/css">



</STYLE> 


                                        <title>{% trans %}Register new distributor{% endtrans %}</title>      <script type="text/javascript" src="/welcome/static/js/jquery-1.7.1.js"></script>

        <script type="text/javascript" src="/welcome/static/js/jquery.popupWindow.js"></script>
                                </head>
                                <body>  

<div id="content"><img src="/welcome/static/images/reg-reg3.gif">
  <div id="content-container">







                                <form action="{{action}}" method="post">

                                               <table><tr><td>

                                                 <label>{% trans %}Soc security number{% endtrans %}</label></td><td>{{ form.soc_sec(size='10', maxlength='10')}}({% trans %}YYMMDDXXXX{% endtrans %})</td></tr>

                                                {% if form.soc_sec.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.soc_sec.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

                                                <tr><td>

 <label for="start">{% trans %}Your sponsor's ID{% endtrans %}</label></td><td>

                         <input id="log1" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log1" size="3" type="text" value="{% if form.sponsor_id.log1.data %}{{form.sponsor_id.log1.data}}{% endif %}" />

                       <input id="log2" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log2" size="3" type="text" value="{% if form.sponsor_id.log2.data %}{{form.sponsor_id.log2.data}}{% endif %}" />
                        <input id="log3" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log3" size="3" type="text" value="{% if form.sponsor_id.log3.data %}{{form.sponsor_id.log3.data}}{% endif %}" />
               <input id="log4" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log4" size="3" type="text" value="{% if form.sponsor_id.log4.data %}{{form.sponsor_id.log4.data}}{% endif %}" />

               (<a class="open_dialog" href="/static/sponsor-id.html">{% trans %}What is a sponsor ID{% endtrans %}?</a>)</td><td></tr>


{% if form.sponsor_id.log1.errors %}


<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.sponsor_id.log1.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
                                                <label>Email</label></td><td> {{ form.email(size='22', maxlength='60')}}  </td></tr>

{% if form.email.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.email.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}



<tr><td>
 <label>{% trans %}First name{% endtrans %}</label></td><td>{{ form.firstname(size='22', maxlength='60')}}</td></tr>

{% if form.firstname.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.firstname.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
 <label>{% trans %}Last name{% endtrans %}</label></td><td>{{ form.lastname(size='22', maxlength='60')}}</td></tr>

{% if form.lastname.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.lastname.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr>
 <td>
 <label>{% trans %}Address{% endtrans %}</label></td><td>{{ form.address(size='22', maxlength='60')}}</td></tr>

{% if form.address.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.address.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
<label>{% trans %}Zip code{% endtrans %}</label></td><td>{{ form.zipcode(size='22', maxlength='60')}}</td></tr>

{% if form.zipcode.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.zipcode.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
<label>{% trans %}City{% endtrans %}</label></td><td>{{ form.city(size='22', maxlength='60')}}</td></tr>

{% if form.city.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.city.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
<label>{% trans %}Phone{% endtrans %}</label></td><td>{{ form.phone(size='22', maxlength='60')}}</td></tr>

{% if form.phone.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.phone.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

</table>


                                        <button>{% trans %}Next{% endtrans %}</button>
                                </form> </div>
 <img id="image-logo" src="/welcome/static/images/snabbreg002.jpg" />

</div><script type="text/javascript"> 
$('.open_dialog').popupWindow({ 
height:500, 
width:700, 
top:325, 
left:400 
}); 
</script>
</body>
                        </html>

BODY{background image:url（/welcome/static/images/register_top2.png）；background repeat:repeat-x；}
#内容{
宽度：700px；
保证金：180美元；
}
#内容容器{
宽度：700px；
左边距：180像素；
}
#图像标志{
浮动：对；
}
.has_errors{border:1px solid#ff0000}
.errors{color:#ff0000；}
{%trans%}注册新分发服务器{%endtrans%}
{%trans%}Soc安全编号{%endtrans%}{{form.Soc_sec（size='10'，maxlength='10'）}}（{%trans%}YYMMDDXXXX{%endtrans%}）
{%if form.soc_sec.errors%}
{%for form.soc_sec.errors%}{{error}
{%endfor%}
{%endif%}
{%trans%}您的赞助商的ID{%endtrans%}
()
{%if form.赞助商_id.log1.errors%}
{%for form.shandor\u id.log1.errors%}{{error}
{%endfor%}
{%endif%}
电子邮件{form.Email（size='22'，maxlength='60'）}
{%if form.email.errors%}
{%for form.email.errors%}{{error}
{%endfor%}
{%endif%}
{%trans%}名字{%endtrans%}{{form.firstname（size='22'，maxlength='60'）}
{%if form.firstname.errors%}
{%for form.firstname.errors%}{{error}
{%endfor%}
{%endif%}
{%trans%}姓氏{%endtrans%}{{form.lastname（size='22'，maxlength='60'）}
{%if form.lastname.errors%}
{%for form.lastname.errors%}{{error}
{%endfor%}
{%endif%}
{%trans%}地址{%endtrans%}{{form.Address（size='22'，maxlength='60'）}
{%if form.address.errors%}
{%for form.address.errors%}{{error}
{%endfor%}
{%endif%}
{%trans%}邮政编码{%endtrans%}{{form.zipcode（size='22'，maxlength='60'）}
{%if form.zipcode.errors%}
{%for form.zipcode.errors%}{{error}
{%endfor%}
{%endif%}
{%trans%}城市{%endtrans%}{{form.City（size='22'，maxlength='60'）}
{%if form.city.errors%}
{%for form.city.errors%}{{error}
{%endfor%}
{%endif%}
{%trans%}电话{%endtrans%}{{form.Phone（size='22'，maxlength='60'）}
{%if form.phone.errors%}
{%for form.phone.errors%}{{error}
{%endfor%}
{%endif%}
{%trans%}下一个{%endtrans%}
$（'.open_dialog'）.popupWindow（{
身高：500，
宽度：700，
排名：325，
左：400
});

您是否尝试过添加

背景位置：中间顶部？

如上图所示。他的回答是正确的。下面是我将如何标记它。事实上，我刚刚得到了Gedit3的Zen编码，我想看到所有HTML都显示得非常快：）。我现在使用HTML5标记，但我只是通过div风格来实现，因为大多数人都习惯使用它。我在晚些时候抽出时间，根据接受的答案提供额外信息

#header {
background-position: center top;
background-repeat: no-repeat;
vertical-align: top;
background-image: url('/foo/bar.png')
}

.wrapper {
margin: 0 auto;
}

<!DOCTYPE html>
    <html>
      <head>
          <title></title>
      </head>
        <div id="page">
            <div class="wrapper">
                <div id="header">
                    <div id="logo"></div>
                </div>
                <div class="clearfix"></div>
                <div id="body">
                    <div class="content_wrapper">
                        <div class="body"></div>
                        <div class="col1"></div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </html>

#标题{
背景位置：中上；
背景重复：无重复；
垂直对齐：顶部；
背景图像：url（'/foo/bar.png'）
}
.包装纸{
保证金：0自动；
}

如果您是css新手，请查看此项

在低分辨率显示器上查看！（JK）好的。谢谢你的链接和信息。