CODEWITHSUNDEEP
cssvertical-alignment
jason
jason

Reputation: 1631

pseudo class vertical-align

when I delete the vertical-align in div.content:before selector, the text will pull down and can't show completely, so what's the pseudo class do and why this works? PS: Is there any other way to implement like the demo shows, namely align the text in the middle and text will begin in a new line if it is too long.

here is the demo: http://jsfiddle.net/yougen/8WhNZ/

html:

<div class="wrapper">
        <div class="content">
            <span>Mix Color Lace Dress</span>
        </div>
</div>

css:

div.wrapper { position: relative; width:120px; }

div.content {
    width: 120px;
    height: 80px;
    text-align: center;
    background: rgba(51,51,51,0.5);
}

div.content:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

div.content span {
    display: inline-block;
    width: 80px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    color: white;
}

Upvotes: 0

Views: 865

Answers (2)

dgnin
dgnin

Reputation: 1597

The before pseudo element is just at the left of your real content. Its function is to have a 100% of the height of the container and precisely has a vertical-align: middle to force every element on the same line (in this case, your span) with the same vertical-align: middle to be shown in the middle of the container, although it hasn't the 100% of the height.

This trick is used when you don't know the height of the element that you want to align in the middle. In other cases you can play with vertical margins, for example, but here we need a pseudoelement with a known height (100% of the container).

Look at that: http://jsfiddle.net/7hUqs/

#element-1 {
    height: 50px;
    background-color: blue;
    vertical-align: middle;
}
#element-2 {
    height: 100px;
    background-color: yellow;
    vertical-align: top;
}
#element-3 {
    height: 70px;
    background-color: green;
    vertical-align: middle;
}
#element-4 {
    height: 80px;
    background-color: pink;
    vertical-align: middle;
}

The vertical-align: middle works with the silbing elements that have the same came of vertical-align. All of them, as a block, will be aligned with the other elements of the line and its vertical alignement (in this case, top). And the height of the line is the maximum height of its elements, not the height of the container. A little weird, but this is the thing.

Upvotes: 2

saman khademi
saman khademi

Reputation: 842

try this

div.content:before {
    content:'';
    display: inline;
    height: 100%;
    margin-top:10px;
    margin-right: -0.25em;
}
div.content span {
    display: inline;
    width: 80px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    color: white;
}

fiddle demo

Upvotes: 0

Related Questions