CODEWITHSUNDEEP
htmlvertical-alignmentcss
alice
alice

Reputation: 2625

Vertical centering with line-height

<div style="line-height:100px; height:100px;">
    <span style="vertical-align:middle;">test</span>
</div>

Only when vertical-align:middle is specified in the span, the above html produces different result from the below.

<div style="height:100px;">
    <span style="line-height:100px; vertical-align:middle;">test</span>
</div>

It's placed down by 1px on chrome and firefox, and by 2px on ie8.

Why is it different?

Upvotes: 2

Views: 274

Answers (2)

Eric Robinson
Eric Robinson

Reputation: 2095

The primary difference between the SPAN and DIV elements is that SPAN doesn’t do any formatting of it’s own. The DIV element includes a paragraph break. The SPAN element simply tells the browser to apply the style rules to whatever is within the SPAN.

And I'm thinking that because of the little bit of formatting div does could be the difference.

Upvotes: 0

Prateek
Prateek

Reputation: 4013

The problem is div tag's default border-width set it 0px and then see the change.

Upvotes: 1

Related Questions