Richi888 Richi888 - 2 years ago 59
HTML Question

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

I want to vertically align the

links 1-4 under the class

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


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;

<li><a href="#">Home</a>
<li><a href="#">About</a>
<li><a href="#">Blog</a>
<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>



Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download