So i have a problem with text alignment inside of <li>
and <ul>
tags with their parent being <div>
tag. I am unable to move text to the middle of the page due to vertical-align: middle
not working, on the other hand, text-align: center
is working properly. I know that there are some questions here that deal with this problem but i wasn't able to find answer where it's explained why this is happening. My questions are: Why is this happening and how to solve this problem properly? Any help is appreciated! Here's my code:
html, body {
margin: 0;
width: 1500;
height: 1000;
}
.headline {
width: 1500px;
height: 200px;
background-color: cornflowerblue;
display:inline-block;
}
li {
list-style-type: none;
display: inline-block;
font-size: 50px;
}
ul {
margin: 0;
padding: 0;
vertical-align: middle;
text-align: center;
}
<div class="headline">
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
</div>