I can’t center text with "vertical-align"

Asked

Viewed 70 times

0

I want my text to be centered horizontally and vertically on the element <div>. For this, I am using the properties text-align and vertical-align for this element.

The problem is that the property vertical-align: middle; is not centering the text vertically. Below is my code:

#myDiv {
    border: 2px solid #0f0;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    width: 300px;
}
<div id="myDiv">Este daqui é o meu texto</div>

css vertical-align

  • vertical-align: middle; works only when the display for table-Cell (or inline, in some cases).

  • One observation is that table-Cell makes the element behave as an <td element>.

1 answer

2


Opa Jean, take a look and see if this meets what you expect:

 #myDiv {
            border: 2px solid #0f0;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            width: 300px;
        }
  <div id="myDiv">Este daqui é o meu texto</div>

Browser other questions tagged css vertical-align

You are not signed in. Login or sign up in order to post.