Richi888 Richi888 - 6 months ago 9
HTML Question

How do I vertically align elements within a li in that code?

I want to vertically align the

a
links 1-4 under the class
dropdown-menu.


In this example I'm trying to do this by displaying the
div
as a
table-row
but nothing worked.

CODE



body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1ebb90;
overflow: hidden;
}
li {
float: left;
}
li a,
.dropdown-btn {
display: inline-block;
padding: 18px 22px;
}
div {
display: table-row;
}
div a {
display: inline;
vertical-align: middle;
}

<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Blog</a>
</li>
<li class="dropdown">

<a href="#" class="dropdown-btn">Dropdown</a>

<div class="dropdown-menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>

</li>

</ul>




Answer

There are different ways to do it, but one simple way is to use display: block on the links. (fiddle)

Here's a related question/answer related to how inline vs block work.

Comments