如何水平垂直对齐行内块元素

Question

什么是使用CSS将#dates div对齐到头部右侧并垂直居中的最佳/最干净方法?

我尝试了float: right，但这样无法使用vertical-align。我想避免使用floats，因此我使用inline-block，并使用相对定位。是否有更正确的方法？

我不喜欢必须做一个30px的顶部，然后不断尝试使其居中。

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

- sprocket12

Answer 1

你可以使用CSS的display:table属性：

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

示例

如果你想将 #dates 对齐到右侧，可能需要给它一个宽度。

- Pete

---

一个单元格的宽度是否可以根据其内容而非50%来确定？ - sprocket12

CSS表格在这个应用程序中具有优势。在右侧表格单元格中的文本块周围放置一个子包装器div可能会有所帮助，这样您就可以使用text-align right，而不必担心确切的table-cell宽度。 - Marc Audet

Answer 2

使用内联块

使用您发布的HTML元素，尝试以下CSS：

```css display: inline-block; ```

请注意保留HTML标签。

#header {
    background-color: yellow;
    padding: 15px;
    text-align: justify;
    line-height: 0;
}
#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;
    line-height: 1.5;
    font-size: 14px;
    font-family:'Open Sans';
    color: black;
    background-image: url(http://placehold.it/100x100);
    background-position: center;
    padding-left: 32px;
}
#header:after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

由于在#header中有两个子元素，一个是左侧的logo图片，另一个是右侧的文本块，只需使用text-align: justify将logo强制靠左，文本靠右。

为了使其正常工作，您需要在#header中至少有两行。

要生成第二行，请使用伪元素：#header:after，它将在日期后放置一个100%宽度的空内联块。 width: 100% 强制它开始并填充第二行，而vertical-align: top消除了基线以下的额外空白。

要处理高度中的空白，请在#header中设置line-height: 0，这将使伪元素的高度折叠为0。 但是，您需要在#dates中重置line-height: 1.5以获得可读的文本。 优缺点 使用此方法，随着页面宽度变小，元素最终将换行成两行。

如果要将元素保留在单行上，则最好使用CSS表格。

查看演示：http://jsfiddle.net/audetwebdesign/3U3w4/

- Marc Audet

Answer 3

我认为，垂直对齐的最佳方式是使用css:display-table和css"display-table-cell属性。如果您想要将id="dates"中的内容向右对齐，您应该在此块内部使用css:display-inline-table。

#header {
    background: #fff;
    padding: 15px;
    background: #ccc;
    display: table;
}
#logo {
    display: table-cell;
}
#dates {
    display: table-cell;
    text-align: right;
    font-size: 14px;
    font-family: 'Open Sans';
    color: #696969;
}

查看 Fiddle

- Vladimir Shevchuk

Answer 4

使用 display: flex; 属性，您可以将项目设置为水平和垂直居中。

示例

- Ashish Mehta

---

设置一个项目左对齐，另一个项目右对齐时遇到了问题...你能给个例子吗？ - sprocket12

@sprocket12 如果是这样，您还需要添加 justify-content: space-between。这是一个 Flexbox 小抄：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Marlo