why css use inline-block must be add pseudo element

Tags: html css
By : k.k
Source: Stackoverflow.com
Question!

    .pseudo{
        width:100%;
        height:100px;
        border:1px solid blue;
        text-align:center;

    }
    .pseudo:before{
        content:"";
        display:inline-block;
        vertical-align:middle;
        height:100%;
    }
    .pseudo p{
        display:inline-block;
    }
<div class="pseudo">
    <p>hello</p>
</div>

This is my html & css code. my question is why i must use pseudo element the vertical-align:middle can work . it's not work(vertical-align:middle) if write like this

.pseudo{
    width:100%;
    height:100px;
    border:1px solid blue;
    text-align:center;
    display:inline-block;
    vertical-align:middle;

}

By : k.k


Answers

If you do not know how a pseudo class works, here is what you should do:

  1. The definition of pseudo is: "not genuine; sham." (tku Google)
  2. Go to MDN (Mozilla Developer Network) and read about pseudo classes.

A quick excerpt from MDN is:

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Basically, you could have class .foo. Now let's say you want to style it when you hover over it. You could use Javascript, and add a class with the styles you want to use for hovering (using event listeners), but that is unnecessary and wasteful. Instead, you add a pseudo (remember: "not genuine; sham") class. So its a class, but it's not really a class. A pseudo class is defined with a : after the selector and before the pseudo class. For example:

  • span:hover
  • .my-class:first-child
  • #id-4-me:not(#id-not-4-me)

etc.

There are also pseudo elements. They are defined with ::. You can read about them here.

In the future, please research your question before asking it, in alignment with the stackoverflow guidelines on asking

By : 4lackof


The vertical-align property applies to the element of the text line (unless you apply it to something with display:table-cell), so keywords like center, top, and bottom are calculated from the height of the text line (the so called line box). The height of this line box is calculated basically from the heights of the inline elements that make this line (texts, images, inline blocks etc.), as well as their positions relative to each other (affected by some vertical-align values).

Without the pseudo element, the height of your line box is determined by the height of the text itself, so the text fits the whole line box, so its vertical midpoint is already aligned with the line box vertical midpoint, so applying vertical-align:middle changes nothing. But the inline block with 100% container height makes the line box (at least) as tall as this inline block (which means that the line box becomes as tall as the container). And aligning the vertical midpoint of the text with the vertical midpoint of this tall line box also makes the text visually centered in the container.



This video can help you solving your question :)
By: admin