Vertically Align multi-line text inside a span

Question

I have spent countless hours yesterday and today to figure out how to do this. I cant believe CSS doesn't have an easy way to handle this.

Essentially, I have some text within a span class="name" whose length is not fixed. In certain instances, it can spill over to the next line. How do I vertically align this within my container.

More specifically, how do I vertically align "ABC Father And Sons Company LLC" within my container? http://jsfiddle.net/D3L8S/

<div class="container">
  <span class="name">ABC Father And Sons Company LLC  </span>
  <a href="#" class="addr">Address</a>
  <a href="#" class="hours">Hours</a> 
  <a href="#" class="more">More</a> 
</div>

css classes

// CSS
.container {
    background: #DDEBF0;
    padding: 11px;
    border: 1px solid #D2D2D2;
    width: 380px;
    margin-bottom: 10px;
    height:18px;
    line-height:18px;
    display:inline-block;
}

.name {
    width:200px;
    float:left;
}

.addr, .hours, .more {
    width:60px;
    float:left;
}

If I add a negative top margin to "name" (margin-top:-8px), I can achieve this but it obviously messes up rendering for XYZ Company LLC http://jsfiddle.net/FM4dA/

The solution should ideally be Cross-browser compatible (atleast ie8 should support it)

EDIT - I forgot to mention initially that my container width is fixed and cannot be changed.

Answer 1

Here is one way of doing it using inline blocks:

.container {
    background: #DDEBF0;
    padding: 11px;
    border: 1px solid #D2D2D2;
    width: 380px;
    height: 50px;
    line-height: 50px;
    margin-bottom: 10px;
    display:inline-block;
}

.name {
    width:200px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.addr, .hours, .more {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

First, make sure to leave enough vertical space for multi-line names, so on .container, I used height: 50px and line-height: 50px.

However, you need to reset the line-height: 1 (or some suitable value) on the child elements otherwise the interline spacing will not be attractive.

Then, instead of floats, use display: inline-block and vertical-align: middle on the child elements (.name, .addr, .hours, .more).

See demo at: http://jsfiddle.net/audetwebdesign/Wp84v/

Note: You may not need to specify the width on .addr, .hours, .more, so I let the widths take on the shrink-to-fit value.

Answer 2

One way to vertically align div's contents is to use the vertical-align css property. But it works only on display:table-cell elements. So, wrap your container into a display:table div, and change the container display to display:table-cell.

Like this: http://jsfiddle.net/D3L8S/2/