Search code examples
csstextalignmentvertical-alignment

Text alignment issues in CSS-generated strip

I've created a simple strip on which a text content is placed, which looks like image below.Strip showing text above it

and the CSS for the same is:

.strip {
    display: block;
    margin: auto;
    float: left;
    width: 6em;
    height: 2em;
    background: #090909;
    color: white;
    font-weight: bold;
    text-align: center;
}

Now, what I'm trying to do is to get Text in the middle of the strip, both horizontally and vertically, while text-align: center helps me to attain horizontal centering of text. I can't get the text vertically centered. Note that my mark is plain <div class="strip">12345678</div> and I'm not willing to use any span within that div. And want to keep markup as clean as possible. How can I attain this behaviour?

Thanks.

Solution

  • Add line-height equal to the height of the div. Check this http://jsfiddle.net/VRBrr/2/

    line-height:2em;