css - 垂直对齐两个不同大小的 div，使较小的 div 居中

Question

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

我一直在尝试弄清楚如何使“小文本”与“大文本”垂直对齐。我做了一些阅读，尝试了各种包装内容的示例，使用 display:table 等。

我宁愿不浮动元素，但如果这是最简单的方法，那么可以。

有任何想法吗？

Answer 1

添加规则vertical-align:middle;似乎#OrdersEditTitle可以做到。

jsFiddle 示例

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

Answer 2

要么按照 j08691 所说的去做，要么将位置设置为相对，将顶部设置为-5px.

jsFiddle

#FiltersHaveChangedHighlight {
    display: inline-block;
    padding: 5px;
    position:relative;
    top:-5px;
    margin-left: 5px;
    font-size: 11px;
}
​