我想将div中的表单元素居中(水平和垂直)。整个div应该居中,并在左右div之间。
问题:
通过填充,右div未对齐。
此外,文本(Text1)也未正确垂直对齐。 ->填充顶部的作品
整个内容
表单不是水平对齐的。
这是一个example。
HTML:
<div id="top">
<div id="top-background-left"> </div>
<div class="external">
<div class="externalinner">
<form id="form" name="form" method="post" action="action.html">
<p style="float: left; padding-right: 10px;">Text1</p>
<input name="one" id="one" type="text" size="15" maxlength="10" />
<select name="no" size="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button type="submit">Go</button>
</form>
</div>
</div>
<div id="top-background-right"> </div>
</div>
CSS:
#top{
padding: 0px;
width: 100%;
height: 66px;
background-color: #efa910;
z-index:12;
position:fixed;
overflow:hidden;
}
.externalinner {
text-align: left;
padding-top: 20px;
}
.external {
background: #efa910;
text-align:center;
margin-left:auto;
margin-right:auto;
width:900px;
}
#top-background-left {
background: white;
width: 150px;
height: 66px;
float: left;
}
#top-background-right {
background: white;
width: 150px;
height: 66px;
float: right;
}
最佳答案
正如Gareth所说here
将<div id="top-background-right"> </div>
移到<div class="external">
之前可解决正确的div对齐错误。
至于文本对齐方式,将<p>
更改为<span>
并从CSS中删除float:left
将使它成为表单其余部分的内联元素,使您可以将其水平居中。 (或者,您可以根据自己的需要将float:left
更改为display:inline
。
最后,您需要从.external类中删除width: 900px
。还有以下两行:
margin-left:auto;
margin-right:auto;
也不需要,因此您可以将其删除。
这是给您的jsFiddle。