CODEWITHSUNDEEP
htmlcss
Dianabolz
Dianabolz

Reputation: 79

Vertical align text?

having trouble vertical aligning my navigation links in my "header-right" i want to align it directly in the center

Here is my html

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<link href="css/style.css" type="text/html" rel="stylesheet">
</head>

<body>

<div id="wrapper">

<div id="header">

    <div id="header-left">
        <a href="index.php"><img src="images/logo.png" /></a>
    </div>

    <div id="header-right">
        <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Home</a></li>
        </ul>
    </div>

</div>


</div>

</body>
</html>

And here is my css

body { background-image: url('../images/bg.jpg'); background-repeat:repeat;      padding:10px 0 10px 0; margin:0; }

#wrapper { width:960px; margin:auto;  }

#header { width:960px; background-color: rgba(0,0,0,0.3); height:110px; border-        radius:5px;  }

#header-left { float:left; }

#header-right { float:right; height:110px; line-height:110px;}

#header-right ul li { display:inline-block; padding-right:5px; padding-left:5px; }

#header-right a:link { color:#ffffff; text-decoration:none; }

I've tried using height and line-height and then vertical:align middle but it didn't seem to work, I'm new to html + CSS and having some trouble.

Upvotes: 1

Views: 106

Answers (3)

user2625787
user2625787

Reputation:

Apply margin:0; to your ul element;

Here's a fiddle. http://jsfiddle.net/z69c4/ I had to remove the left div and float the right div to the left so you can see the menu, but that doesn't affect this issue.

Upvotes: 3

Cristian Stein
Cristian Stein

Reputation: 1

This style definition is making your line get bigger than it's needed.

#header-right { float:right; height:110px; line-height:110px;}

You should define a smaller height for this element.

Upvotes: 0

Cooleronie
Cooleronie

Reputation: 1315

You can use vertical-align:middle and display:table-cell. You need to add " display:table" to the parent for this to work. It is also explained here http://phrogz.net/css/vertical-align/index.html

Line-height should also work, set it as the same height as the parent div:

  #menu {
  height: 90px;
  line-height: 90px;
}

Edit: Line-height usually won't work in a floating element so that's why it might not work for you.

Upvotes: 0

Related Questions