Question

我想将表单元素居中于div（水平和垂直）。整个div应该居中，位于左右div之间。

问题：

通过填充，右侧div未对齐。
此外，文本（Text1）未正确垂直对齐。 - ＆GT; padding-top works
整个内容表格不是水平对齐的。

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;
}

Answer 1

将<div id="top-background-right"> </div>移至<div class="external">之前解决了div错误对齐的问题。

如果您向line-height添加p与高度相同，则表单会修复文字错位。

modified jsFiddle

我不明白第三个问题是什么意思。

Answer 2

正如加雷思所说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。

Answer 3

正如其他海报所说，行高是垂直居中文本的绝佳方法。

这是一个没有浮点数的例子，使用position来排列div。

我在3个元素周围添加了一个容器，并以绿色突出显示左右div，您可以看到它们。

告诉我这对你是否合适，或者如果我错了，你必须在不改变html源的情况下找到解决方案。

jsfiddle example

div中的中心文本div（左和右）

3 个答案: