how to align unordered list verticaly center, it's list items are in horizontal position ?

Question

/* CSS Code*/
a{
    text-decoration:none;
}
.main-header{
    margin-top:50px;
border:1px solid red;
text-align:bottom;

}
.name{
    float:left;
    border:1px solid blue;


}
.main-nav{

    float:right;
}
.main-nav li{
    display:inline-block;
    margin-right:15px;
}

.clearfix::after{
    content:"";
    display:table;
    clear:both;
}
/*****************************/

/*HTML Code*/

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Best City Guide</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="main-header clearfix">

    <h2 class="name">Best City Guide</h2>
        <ul class="main-nav">
            <li class="ice-cream"><a href="#">ice cream</a></li>
            <li><a href="#">donuts</a></li>
            <li class="tea"><a href="#">teay</a></li>
            <li><a href="#">coffee</a></li>
        </ul>

    </header>
</body>
</html>

Moderator edited for formatting: Markdown was added to the question to properly render the code. Please see the Markdown Cheatsheet link at the bottom of the "Add an Answer" section for tips on how to post code to the Community.

Answer 1 · 2016-12-20T08:39:34Z

December 20, 2016 8:39am

Adding a margin-top property to the li's will do the trick.

.main-nav li {
   display: inline-block;
   margin-right: 15px;
   margin-top: 8px;
}

This should help align the list items just change the value until you are happy with it.

Welcome to the Treehouse Community

Looking to learn something new?

Jaspreet Singh

Jaspreet Singh

how to align unordered list verticaly center, it's list items are in horizontal position ?

1 Answer

Redweb FED

Redweb FED

Jaspreet Singh

Jaspreet Singh