在两个 div（左右）之间的 div 中居中文本答案

【问题标题】：center text in div between two div (left and right)在两个 div（左右）之间的 div 中居中文本
【发布时间】：2012-07-17 18:10:15
【问题描述】：

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

问题：

通过填充，右侧 div 未对齐。
此外，文本 (Text1) 未正确垂直对齐。 -> padding-top 有效
整个内容表单不是水平对齐的。

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

【问题讨论】：

标签： css layout html xhtml

【解决方案1】：

正如其他发帖人已经说过的，line-height 是一种很好的垂直居中文本的方法。

这里是一个没有float的例子，使用位置来排列div。

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

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

jsfiddle example

【讨论】：

【解决方案2】：

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

【讨论】：

如果我让窗口变小，元素会因为overflow: hidden; 而消失。我试图在外部内部设置min-width，但元素仍然消失。你有解决方案吗？
@testing 你需要将min-width 放在top 类中。这是jsFiddle。
如果窗口尺寸更小，是否有可能使 top-background-left 更小？现在，如果我用 1024x768 分辨率进行了测试。在我的真实示例中，缺少表单的一些输入。
@testing 例如，您可以将宽度设置为width:10% 的百分比，并添加max-width:150px（或您需要的任何值），这样在更高的分辨率下它就不会变得太大。虽然我会更改左右 div 上的 CSS，以使它们保持相同的大小。这是jsFiddle

【解决方案3】：

将<div id="top-background-right">&nbsp;</div> 移动到<div class="external"> 之前解决正确的div 错位问题。

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

modified jsFiddle

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

【讨论】：

表单的内容（Text1、文本框、选择、按钮）应该水平对齐。目前它是左对齐的。