我想将div中的表单元素居中(水平和垂直)。整个div应该居中,并在左右div之间。

问题:


通过填充,右div未对齐。
此外,文本(Text1)也未正确垂直对齐。 ->填充顶部的作品
整个内容
表单不是水平对齐的。


这是一个example

HTML:

<div id="top">
  <div id="top-background-left">&nbsp;</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">&nbsp;</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">&nbsp;</div>移到<div class="external">之前可解决正确的div对齐错误。


至于文本对齐方式,将<p>更改为<span>并从CSS中删除float:left将使它成为表单其余部分的内联元素,使您可以将其水平居中。 (或者,您可以根据自己的需要将float:left更改为display:inline

最后,您需要从.external类中删除width: 900px。还有以下两行:

margin-left:auto;
margin-right:auto;


也不需要,因此您可以将其删除。

这是给您的jsFiddle

09-11 06:50
查看更多