垂直对齐两个不同大小的div，使较小的div居中 [英] Aligning two different-sized divs vertically such that the smaller one is centered

问题描述

http://jsfiddle.net/RaP2D/5/

我一直在试图找出如何使'小文本'垂直对齐'大文本'。我做了一些阅读，尝试了各种例子与包装的内容，使用display：table等。

I've been trying for a while to figure out how to make 'Small Text' vertically-align with 'Large Text'. I did some reading, tried various examples with wrapping the content, using display:table, etc.

我不喜欢浮动的元素，但如果这是最简单的

I would prefer not to float the elements, but if that is the easiest way then OK.

任何想法？

推荐答案

添加规则 vertical-align：middle; 到 #OrdersEditTitle 似乎做到了。

Adding the rule vertical-align:middle; to #OrdersEditTitle seems to do it.

jsFiddle示例

jsFiddle example

#OrdersEditTitle {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 5px;
    color: #2E6E9E;
    display: inline-block;
    vertical-align:middle;
}

这篇关于垂直对齐两个不同大小的div，使较小的div居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！