CODEWITHSUNDEEP
htmlmessagefadeout
Pele
Pele

Reputation: 71

why Text is not horizontally centered?

I try to create simple message
And it's works.
But the text is not verically centered even though I have it set vertical-align: middle;
Can you explain why?

.error-message {       
    animation: fadeOut 2s forwards;
    animation-delay: 1s;           
    color: #000000;
    font-size: 40px;
    padding: 40px;
    background: red;
    text-align: center;
    vertical-align: middle;
    position: absolute; left:0px; top:100px; width:100%;height:30px;
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
    
<div class="error-message">
  <p>Some message text</p>
</div>

Upvotes: -2

Views: 59

Answers (3)

Ayoub ASSAOUD
Ayoub ASSAOUD

Reputation: 150

you can just delete heigth: 30px to allow your messe-age decide which is the appropriate height to contain the inside paragraphe.

/* height:30px; */

Upvotes: -1

Esha Shah - HerDigitalYard
Esha Shah - HerDigitalYard

Reputation: 33

The 'vertical-align' property is primarily for aligning inline and inline-block elements with respect to their parnet div or element.

Please refer this doc for verticle-align

we can use Flexbox to center vertically in a block-level element.

You just need to add below css properties inside .error-message class :

display: flex;
align-items: center;
justify-content: center;

Upvotes: 3

David
David

Reputation: 219037

Don't use combinations of padding/margin/height/etc. for positioning of the contents of an element. Centering is trivial with Flexbox. For example:

.error-message {       
    animation: fadeOut 2s forwards;
    animation-delay: 1s;           
    color: #000000;
    font-size: 40px;
    background: red;
    position: absolute;
    left:0px;
    top:100px;
    width:100%;
    height:110px;             /* add height to account for your previous padding */
    display: flex;            /* use CSS flex */
    justify-content: center;  /* horizontally center contents */
    align-items: center;      /* vertically center contents */
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
<h1>Hi friend, try edit me!</h1><br>
    
<div class="error-message">
  <p>Some message text</p>
</div>

Upvotes: 1

Related Questions