0

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

问题：

  • 通过填充，右 div 未对齐。
  • 文本（Text1）也没有正确垂直对齐。-> padding-top 工作
  • 表单的全部内容不是水平对齐的。

这是一个例子。

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

3 回答 3

1

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

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

修改后的 jsFiddle

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

于 2012-07-18T16:30:09.827 回答
1

正如加雷斯在这里所说

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

至于文本对齐方式，将您更改<p>为 a并从其 CSS 中<span>删除将使其成为表单其余部分的内联元素，这将允许您将其水平居中。float:left（或者你可以float:left换成display:inline最适合你的。

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

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

也不需要，因此您可以删除它们。

这是适合您的jsFiddle。

于 2012-07-18T16:43:28.643 回答
0

正如其他海报已经说过的那样， line-height 是垂直居中文本的绝佳方法。

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

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

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

jsfiddle 示例

于 2012-07-18T16:46:36.730 回答