Does vertical align CSS property ever work? - html

Question

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 ?

Answer 1

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

Answer 2

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

Answer 3

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 {}

Answer 4

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>

Answer 5

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>