CODEWITHSUNDEEP
htmlcss
Glendon Philipp Baculio
Glendon Philipp Baculio

Reputation: 67

How to center a text line in a navigation bar?

I am really new in css and I am experimenting how to create a googe landing page which is part of my course I am taking, and I am starting on navigation bar, Even though I already used inline-block, the text is still below the text line and not on its' center, my code is like this:

<!DOCTYPE html>
<html>
<head>
<title>Google Homepage</title>
<style type="text/css">



    .navigation {
        width: 400;
        text-align: right;
    }

    .navigation ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         overflow: hidden;
    }

    .navigation li {

        display:inline-block;
        text-decoration:none; 
    }

    .navigation ul li a {  
    text-decoration:none; 
    padding:0 12px;
    }

    .navigation  #profile-image {
        text-align: center;
        height: 50px;
        border-radius: 50%;
    }
</style>
</head>
<body>

<div class="navigation">

<ul>
    <li style="margin: 5px auto;"> Glendon Philipp </li>
    <li> <a href="#news"> Gmail </a>    </li>
    <li> <a href="#contact"> <img src="img/google-button.jpeg"> </a>    </li>
    <li> <a href="#about"> <img src="img/google-button-notification.jpg"> </a> </li>
    <li> <a href="#profile-image"> <img id="profile-image" src="img/profile.jpg"> </a></li>
</ul>

</div>

</body>
</html>

Upvotes: 0

Views: 41

Answers (2)

VikingBlooded
VikingBlooded

Reputation: 859

Here ya go:

.navigation li {    
        display:inline-block;
        vertical-align: middle;
        text-decoration:none; 
    }

This will align your text to the vertical middle of your images. You will need to tweak your margins and padding though.

Here's the fiddle: https://jsfiddle.net/s04o30ya/

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

Is this ok for you ?

See this fiddle

.navigation ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     text-align: center;
     overflow: hidden;
}

By the way, this is incorrect :

.navigation {
    width: 400;
    text-align: right;
}

You have to add a value of the width like for example : 

.navigation {
    width: 400px;
    text-align: right;
}

Upvotes: 0

Related Questions