Does vertical align CSS property ever work?

6
votes

W3School says :

When we use vertical-align:middle; The element is placed in the middle of the parent element

So I tried to do that, But didn't get desired outcome

CODE :

div {
  height: 200px;
  width: 500px;
  background: red;
  text-align: center;
  vertical-align: middle;
}
p {
  vertical-align: middle;
}
<div>
  text
  <p>
    yo bro
  </p>
</div>

Why m I not getting the desired outcome ?

5
htmlcssvertical-alignment
It only affects alignment for inline items like text. You want flex. – SLaks
I have used the property in both the places and it did'nt work in even one of them – Rasik
And inline items are vertical aligned to line-height. So, add line-height: 200px to your div and you'll see. – Paul
Don't trust w3schools. vertical-align does not behave like that. – Oriol
@Rasik - There is one very good article on the web that properly explains the vertical-align property. I highly recommend you read christopheraue.net/2014/03/05/vertical-align – Alohci

5 Answers

8
votes

because vertical-align only applies to inline level and table-cell elements. Both div and p are block level elements.

Applies to inline-level and table-cell elements. It also applies to ::first-letter and ::first-line.

MDN Source

With that in mind and using your example make your div a table and your p a table-cell

div {
  height: 200px;
  width: 500px;
  background: red;
  text-align: center;
  display: table
}
p {
  vertical-align: middle;
  display: table-cell;
}
<div>
  <p>
    yo bro
  </p>
</div>

NOTE: Don't trust W3Schools as source, instead use MDN or W3C Specs

1
votes

There are a couple of problems with your posted code.

Firstly, you haven't really explained what your desired outcome is so it's hard to help you with your specific problem.

Assuming you want to align the paragraph text with the other text in the div, you'll have to add display:inline-block; to your paragraph. Then, the trick with vertical aligning is to use line-heightas well as height. Set them both the same and voilá, things line up nicely.

div{
  height: 200px;
  width: 500px;
   line-height:200px;
  background: red;
  text-align:center;
  vertical-align: middle;
}
p{
  display:inline-block;
  padding:0;
  margin:0;
}

codepen here

1
votes

Add to div in css display: table-cell ;

div {
   display: table-cell;
   height: 200px; 
   width: 500px; 
   background: red; 
   text-align:center;
   vertical-align: middle; 
}
p {}
1
votes

try using, line-height in styling, as shown below, or fiddle link

 div{
  height: 200px;
  width: 500px;
  background: red;
  text-align:center;
  vertical-align: middle;
}
p{
  /* vertical-align: middle; */
  line-height: 100px;

}
<div>
  text
  <p>
    yo bro
  </p>
</div>
0
votes

If you wanted to use FlexBox you could do it this way.

div {
  height: 200px;
  width: 500px;
  background: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

This makes things centred both ways. If you want it just to be the height then delete justify-content. Note that you need to do flex-direction: column in this example to make the content go down the page and not sit side-to-side. 

div {
  height: 200px;
  width: 500px;
  background: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
<div>
  yo
  <p>bro</p>
</div>