如何水平和垂直对齐内联块

Question

最好/最干净的方法是CSS将标题对齐#dates div到标题的右侧，并垂直居中。

我试过了float: right，但就是不允许vertical-align。我想避免使用浮动，所以我使用inline-block, 并使用相对定位。有没有更正确的做法呢？

我不喜欢这样的事实：我必须将顶部设置为 30 像素，并不断尝试直到它居中。

<div id="header">
    <a id="logo" href="~/" runat="server">
        <img src="Images/Interface/logo.png" alt="logo" />
    </a>
    <div id="dates">
        <div id="hijri-date">2 Ramadhaan, 1435 AH</div>
        <div id="gregorian-date">Sunday 29 June 2014</div>
    </div>
</div>

#header
{
    background-color: white;
    padding: 15px;
    position: relative;
}

#logo
{
    display: inline-block;
    vertical-align: middle;
}

    #logo img
    {
        vertical-align: bottom; /* to get rid of text descender space underneath image */
    }

#dates
{
    display: inline-block;
    position: absolute;
    right: 30px;
    top: 30px;
    font-size: 14px;
    font-family: 'Open Sans';
    color: #696969;
    background: url(Images/Interface/date-icon.png) no-repeat;
    background-position-y: center;
    padding-left: 32px;
}

Answer 1

您可以使用 css display:table：

#header {display:table; width:100%;}
#logo,
#dates {display:table-cell; vertical-align:middle}

例子

如果您希望#dates 向右对齐，您可能需要给它一个宽度