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

alt text 我们如何让文字“创建新位置”垂直居中？将两个div中的一个垂直居中在同一条线上？

HTML/CSS在下面。

将margin-top:5px添加到“创建新..”div有助于但似乎hacky。

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

来源

2010-11-10 Marcus Leon

如果我的回答帮你，请考虑点击其下方得分小复选框，将其标记为“已接受”。如果没有，请让我知道你需要什么进一步的信息，所以我可以帮助你更多。 – 2013-05-16 19:49:16

以下可能对您有所帮助。

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

来源

2010-11-10 18:17:33 prolink007

使室内的行高的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>

来源

2010-11-10 18:38:48 Jeff

此方法应该在所有的浏览器，是稳定的，并让您轻松选择您希望您的内容为中心的对象。空容器是我用这种方法唯一的问题，但在比较其他方法的优缺点时，我可以轻易忽略它。

解决方案：您可以使用一个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（如果你想要它在上面，请在页面流中放一些，如果你想在下面放在页面下面）：

来源

2010-11-10 19:10:53

略有不同的方法，但你并不需要的花车，垂直对齐应该在这种情况下正常工作IMO：

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

来源

2010-11-10 19:33:49 Mig

我总是用这样的伎俩：

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

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

也许以上是更好的答案，我发布这个，因为它很简单，为我工作。 :)

来源

2010-11-11 13:39:34

解决此问题的方法是在“创建位置”div中添加margin-top:4px。这是我可以开始工作的唯一解决方案！

来源

2010-12-03 19:06:28

这将工作.....

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

来源

2013-02-02 09:54:18

以下内容将基于创建两个项目相等的行高来工作。

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

诀窍是设置含有.rowDIV是具有24px高，并且还设置了包含SPAN元件line-height的24px。通过这样做，您可以告诉浏览器需要多少垂直空间才能处理文本行。

但是请注意，24px不是重要的部分 - 重要的部分是确定button的高度，这是基于您的CSS和您选择的按钮本身的字体。

在这种情况下，我给你垂直居中的例子的原因是基于我放在顶部的EXAMPLE ONLY CSS - 它表示字体大小应该是12px。然后，将默认浏览器尺寸（至少在铬）将可提供按钮周围一点点额外的margin和padding，以及边界 - 这将导致大约24px总高度，而这种外观：

Example

边框也是由示例CSS创建的，仅用于向您显示垂直对齐是正确的。一旦你删除.row { border: 1px solid #ccc; }，它会消失。

这里是一个JSBin这说明它的工作：

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

来源

2013-04-11 19:27:35

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

回答

相关问题