Vertical align inside of unordered list

Question

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>

score 1 · Accepted Answer · answered Oct 11 '20 at 14:29

There's some confusion about what vertical-align is meant for.

It is actually for creating _subscripts and ^superscripts using CSS. So, it displaces elements inside a line.

If you think about that, you can see that if your line is not tall enough, the middle will not do anything.

In your CSS styles, you should add line-height: 200px; to your container. This should not be a problem, since you are already defining your height as 200px.

This increases the height of the line, so your vertical-align: middle can have more room to actually center the items.

Honestly, you should be using flex these days to achieve the same.

html, body{
    margin:0;
    width:1500px;
    height: 1000px;
}

.headline{
    width:1500px;
    height:200px;
    line-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;
    
}

<!DOCTYPE html>

<html>

    <head>
    
        <title> Positioning </title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    
    <body>
        <div class="headline">
        
            <ul>
                <li>Text1</li>
                <li>Text2</li>
                <li>Text3</li>
            </ul>
        
        </div>
    
    
    </body>

</html>

Vertical align inside of unordered list

1 Answers1