Question

alt text 我们怎样才能将“创建新位置”文本垂直居中？

HTML / CSS在下面。

将margin-top:5px添加到“创建新..”div有帮助但看起来很骇人。

<div style="margin-top:5px">
  <div style="float:left">Create new position</div>
  <div style="float:right"><input type="submit" id="x" value="Save"></div>
  <div style="clear: both;"></div>
</div>

Answer 1

以下内容将基于创建两个项目等效的行高。

<强> HTML ：

<div class="row">
  <span class="left">Create new position</span>
  <span class="right"><input type="button" value="Save" />
</div>

<强> CSS ：

/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */
* { font-family: Tahoma, sans-serif; font-size: 12px; }
.row { border: 1px solid #ccc; }
/* END EXAMPLE ONLY PORTION */

.row { height: 24px; }
.row > span { line-height: 24px; }
.left { float: left; }
.right { float: right; }

诀窍是将包含.row的{{1}}设置为DIV高，并将包含的24px元素设置为SPAN { {1}}。通过这样做，您可以告诉浏览器占用文本行的垂直空间。

但请注意，line-height并不是重要的部分 - 重要的是确定24px的高度，这取决于您的CSS和按钮本身所选的字体。< / p>

我给你的例子在这种情况下垂直居中的原因是基于我放在顶部的24px CSS - 其中字体大小应该是button。默认的浏览器大小调整（至少在Chrome中）将提供一些额外的边距和按钮周围的填充，以及边框 - 这导致总高度大约为EXAMPLE ONLY，并且这个外观：< / p>

Example

边框也是由示例CSS创建的，只是为了向您显示垂直对齐方式是正确的。删除12px后，它将消失。

这是一个显示它工作的JSBin：

http://jsbin.com/otekil/1/edit

Answer 2

以下内容可能会对您有所帮助。

<div align="center">

</div>

所以看起来可能会这样：

<div align="center">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>

Answer 3

使内部div的行高与外部div的高度相同。

示例：

<div style="margin-top:5px; height: 100px;">
          <div style="float:left; line-height: 100px;">Create new position</div>
          <div style="float:right"><input type="submit" id="x" value="Save"></div>
          <div style="clear: both;"></div>
        </div>

Answer 4

此方法应适用于所有浏览器，稳定，并允许您轻松选择要将内容置于中心的对象。空容器是我用这种方法唯一的问题，但在比较其他方法的优缺点时我很容易忽略它。

的解决方案 的：你使用父级高度的一半的div来推送你的内容块（push_to_center类），然后将它减少一半的内容高度（内容类）。

在线样式声明

<div style="float:left; height:50%; margin-bottom:-55px;"></div> <div style="clear:both; height:110px; position:relative; width:200px;"> <div style="float:left">Create new position</div> <div style="float:right"><input type="submit" id="x" value="Save"></div> </div>

完整的HTML网页（ see it working ）：

<html><head><title>Test Center Div</title> <style> .push_to_center {float:left; height:50%; margin-bottom:-55px;} .content {clear:both; height:110px; position:relative;} </style> </head> <body> <div class="push_to_center"></div> <div class="content" style="width:200px; height:110px;"> <div style="float:left;">Create new position</div> <div style="float:right;"><input type="submit" id="x" value="Save"></div> </div> </body> </html>

要从居中中排除“保存”按钮，只需将其移出“内容”类别的div（如果您希望将其放在页面流中，则将其放在页面流中，如果您希望将其放在页面底部，则将其放在页面下方）：

Answer 5

稍微不同的方法，但你不需要浮点数，vertical-align应该在这个实例IMO中正常工作：

<div>
  Create new position:
  <input type="submit" id="x" value="Save" style="vertical-align:baseline;" />
</div>

Answer 6

我总是使用这样的技巧：

style="height: 30px; line-height: 30px; vertical-alignment: middle;"

固定高度加上与行高相同的高度加上中间垂直对齐。

也许以上是更好的答案，我发布这个，因为它很简单，对我有用。：）

Answer 7

通过将margin-top:4px添加到“创建位置”div来解决此问题。这是我可以开始工作的唯一解决方案!!

Answer 8

这将有效.....

<table style="height:500px;width:100%">
<tr>
<td>
<div style="margin-top:px;vertical-alignment: middle;height: 30px; line-height: 30px;">
              <div style="float:left;">Create new position</div>
              <div style="float:right"><input type="submit" id="x" value="Save"></div>
              <div style="clear: both;"></div>
            </div>
            </td>
            </tr>
            </table>

在同一条线上垂直居中两个div中的一个？

8 个答案: