How to align an inline-block horizontally and vert

Question

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

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?

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

<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

Using Inline-Blocks

Using your HTML elements as posted, try the following 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: justify to force the logo to the left and the text to the right.

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

To generate a second row, use a pseudo element: #header:after which 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: top gets rid of the extra white space below the baseline.

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

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.

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

Answer 2

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

Example

Answer 3

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

#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

Answer 4

You can make use of 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