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

How to align an inline-block horizontally and vertically

提问by sprocket12

What is the best/cleanest using CSSto align the #dates divto the right side of the header, and vertically in the middle.

什么是最好/最干净的CSS用于将#dates div标题与标题右侧对齐，并在中间垂直对齐。

I tried float: right, but that does not allow the vertical-align. I want to avoid using floats, so I am using inline-block, and using relative positioning. Is there a more correct approach?

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

I do not like the fact that I have to do a top of 30px, and using trial and error until it centers.

我不喜欢这样的事实，即我必须做一个 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;
}

采纳答案by Pete

You can make use of css display:table:

您可以使用 css display:table：

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

Example

例子

You may need to give the #dates a width if you want it to be aligned to the right

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

回答by Marc Audet

Using Inline-Blocks

使用内联块

Using your HTML elements as posted, try the following CSS:

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

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

Since you have two child elements in #header, a left logo image and a right text block, just use text-align: justifyto force the logo to the left and the text to the right.

由于您在 中有两个子元素#header，一个左徽标图像和一个右文本块，只需用于text-align: justify强制徽标向左，文本向右。

To get this to work, you need at least two rows in the #header.

要使其工作，您需要在#header.

To generate a second row, use a pseudo element: #header:afterwhich will place a 100% wide empty inline-block after the date. The width: 100%forces it to start and fill a 2nd row and the vertical-align: topgets rid of the extra white space below the baseline.

要生成第二行，请使用伪元素：#header:after它将在日期之后放置一个 100% 宽的空行内块。该width: 100%部队就开始和填充第2行vertical-align: top摆脱了低于基准多余的空白的。

To deal with the white space in the height, set line-height: 0in #headerwhich will allow the height of the pseudo-element to collapse to 0. However, you need to reset the line-height: 1.5in #datesto get legible text.

为了处理高度中的空白，设置line-height: 0in #headerwhich 将允许伪元素的高度折叠为 0。但是，您需要重置line-height: 1.5in#dates以获得清晰的文本。

Pros and Cons

利弊

With this approach, the elements will eventually wrap to two lines as the page width gets smaller.

使用这种方法，随着页面宽度变小，元素最终会换行成两行。

If you want to keep the elements on a single line, you might be better off using CSS tables.

如果您想将元素保留在一行中，最好使用 CSS 表格。

See demo: http://jsfiddle.net/audetwebdesign/3U3w4/

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

回答by Vladimir Shevchuk

I think, the best way for vertical align is using css:display-tableand css"display-table-cellproperties. If you want align to right content in id="dates" you should use css:display-inline-tableinside this block.

我认为，垂直对齐的最佳方法是使用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;
}

See Fiddle

见小提琴

回答by Ashish Mehta

Using display: flex;property you can set items to horizontally and vertically center.

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

Example

例子