CODEWITHSUNDEEP
htmlcss
amphibient
amphibient

Reputation: 31212

Span text mysteriously aligned to top

I've been battling this a few hours. The text in this span is mysteriously aligned to the top of the span. Here is a screenshot from Firebug:

enter image description here

And here are my related CSS blocks:

.skills {
    overflow:hidden;
    height:100%;
}


.skills li{
    border-bottom:1px dotted black;
    position:relative;
    width:200px;
    height:18px;
    margin-left:13px;
}

.skills li span{
    display:inline-block;
    position:relative;
    background:white;
    bottom:0px;
    height:100%;
    padding:0 5px; 
}

Here is the HTML:

<h4 class="main-heading"><span>Data Exchange</span></h4>
<ul class="skills">
    <li>
        <span>SOAP/Axis2</h4>
    </li>
</ul>

Can you tell why this is aligned to the top? I want it in the center.

And here is the jsFiddle, where the same code results it in text being in the center. Does that mean that CSS elements higher in the hierarchy may be causing it?

Upvotes: 1

Views: 316

Answers (4)

Tim M.
Tim M.

Reputation: 54359

...where the same code results it in text being in the center. Does that mean that CSS elements higher in the hierarchy may be causing it?

I imagine that an ancestor in your actual stylesheet has the line-height set to less than 18px. You can look at the calculated line height for that element in your actual stylesheet to see what value was being applied.

The default value for line-height is roughly 1.2x (depends on browser).

Set the line-height to be equal to the non-padded height of the containing element to vertically align a single line of text (in this case, 18px).

Example fiddle: http://jsfiddle.net/4vq42/

Upvotes: 2

Daniel Imms
Daniel Imms

Reputation: 50149

Setting line-height to the value of your element's height is the simplest way to vertically align text.

.skills li {
    height:18px;
    line-height:18px;
}

Upvotes: 1

Glenn Hill
Glenn Hill

Reputation: 46

Try adding line-height: 18px to .skills li span CSS.

Edit: Just realised Tim Medora already said this. Ignore me.

Upvotes: 1

Jason Lydon
Jason Lydon

Reputation: 7180

No line-height. Make it the same as the height, either 18px or 100%.

.skills li span{
    display:inline-block;
    position:relative;
    background:white;
    bottom:0px;
    height:100%;
    line-height:18px;
    padding:0 5px; 
}

Upvotes: 1

Related Questions