将两个 div 之一垂直居中在同一行？
如何让文本“创建新位置”垂直居中？
HTML/CSS 如下。
将 margin-top:5px 添加到“Create new..”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>
How can we have the text "Create New Position" be vertically centered?
HTML/CSS is below.
Adding margin-top:5px to the "Create new.." div helps but it seems 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
这会起作用......
This will work.....
以下内容将基于创建两个项目等效的行高来工作。
HTML：
CSS：
技巧是将包含
DIV的.row设置为24px high，并将包含的SPAN元素设置为line-height为24px。通过这样做，您可以告诉浏览器该文本行占用多少垂直空间。但请注意，
24px不是重要的部分 - 重要的部分是确定您的button的高度，这取决于您的 CSS 和为按钮选择的字体本身。我给你的例子在这种情况下垂直居中的原因是基于我在顶部放置的
EXAMPLE ONLYCSS - 它表示字体大小应该是12px< /代码>。默认的浏览器大小（至少在 Chrome 中）将在按钮周围提供一点额外的边距和填充以及边框 - 这导致总高度大约为 24px，这外观：边框也是由示例 CSS 创建的，只是为了向您显示垂直对齐是正确的。一旦删除
.row { border: 1px Solid #ccc; }，它就会消失。这是一个 JSBin，显示它的工作原理：
http://jsbin.com/otekil/1/edit
The following will work based on creating a line-height which is equivalent for both items.
HTML:
CSS:
The trick is to set the
.rowcontainingDIVto be24pxtall, and also set the containedSPANelements to have aline-heightof24px. By doing this, you tell the browser how much vertical space to take up for the line of text.Note, however, that
24pxis not the important part - the important part is identifying how tall yourbuttonis, which is based on your CSS and your selected font for the button itself.The reason the example I'm giving you works to vertically center in this case is based on the
EXAMPLE ONLYCSS I put in at the top - which says the font-size should be12px. The default browser sizing (at least in Chrome) is then going to provide a little extra margin and padding around the button, as well as a border - which results in a total height of roughly24px, and this appearance:The border is created by the example CSS also, and is only there to show you that the vertical alignment is correct. Once you remove
.row { border: 1px solid #ccc; }, it will disappear.Here is a JSBin which shows it working:
http://jsbin.com/otekil/1/edit
下面的内容也许能帮到你。
所以它可能看起来像这样：
The below may help you.
So it would look like this maybe:
使内部 div 的行高与外部 div 的高度相同。
例子：
Make the line-height of the interior div the same height as the height of the exterior div.
Example:
方法略有不同，但您不需要浮动，垂直对齐在这种情况下应该可以正常工作（IMO）：
Slightly different approach but you don't need the floats, vertical-align should work fine in this instance IMO:
此方法应该适用于所有浏览器，并且稳定，并且允许您轻松选择您希望内容居中的对象。空容器是我使用此方法时遇到的唯一问题，但在比较其他方法的优缺点时，我很容易忽略它。
解决方案：
您使用父级高度一半的 div 来推送内容块（push_to_center 类），然后将其减少内容高度的一半（内容类）。
内联样式声明
完整的 HTML 页面（参见它工作）：
要排除“保存”按钮居中，只需将其移出内容类 div（如果您希望将其放在页面上方，则将其放在页面流的前面，如果您想要将其放在页面下方）它在底部）：
This method should work in all browsers, is stable, and allows you to easily choose the object to which you want your content centered. The empty container is the only problem I have with this method, but I can easily overlook it when comparing the pros/cons of other methods.
Solution:
You use a div at half of the parent's height to push your content block (push_to_center class), then reduce it by half the content height (content class).
In-line style declaration
Complete HTML page (see it working):
To exclude the Save button from centering simply move it out of the Content classed div (put it earlier in the page flow if you want it above, and below in the page if you want it at bottom):
我总是使用这样的技巧：
固定高度加上与行高相同的高度加上中间垂直对齐。
也许上面是更好的答案，我发布这个是因为它很简单并且对我有用。 :)
I always used such trick:
Having fixed height plus the same height as line height plus middle vertical alignment.
Maybe the above are better answers, I'm posting this because it's simple and worked for me. :)
通过将
margin-top:4px添加到“Create Position”div 解决了这个问题。这是我可以开始工作的唯一解决方案！Addressed this by adding
margin-top:4pxto the "Create Position" div. This was the only solution I could get to work!!