CODEWITHSUNDEEP
htmlcss
user3611470
user3611470

Reputation: 48

vertically aligning floated element

I have a navigation inside which I have two divs, one for the logo and the other for menu. Logo div was floated to left. So, it's parent's height is now the same as the logo div. But, the floated menu div sits at the top. I want to align it in the middle. How can I do the same? Please help me...

My code is given below...

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <div class="navigation clearfix">
        <div class="logo">
            <img src="logo.png" />
        </div>
        <div class="navigation-menu">
            <a>HOME</a>
            <a>HOME</a>
            <a>HOME</a>
            <a>HOME</a>
            <a>HOME</a>
        </div>
    </div>
    <script src="JavaScript.js"></script>
</body>
</html>

CSS

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

p {
    margin: 0;
}

img {
    display: block;
}

.navigation {
    background-color: yellow;
}

.logo {
    float:left;
}

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

.navigation-menu {
    float:right;
    background-color:red;
}

And, here's the fiddle...

http://jsfiddle.net/ZghVk/

Upvotes: 0

Views: 59

Answers (4)

user2424370
user2424370

Reputation:

Try this:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
p {
    margin: 0;
}
img {
    display: block;
}
.navigation {
    background-color: yellow;
    display:table;
    width:100%;
}
.logo {
    display:table-cell;
}
.navigation-menu {
    text-align:left;
    display:table-cell;
    text-align:right;
    vertical-align:middle;
}
.navigation-menu a{
    background-color:red;    
    float:right;
    padding:0 5px;
}

Hope it helps! :)

Upvotes: 0

Manjuboyz
Manjuboyz

Reputation: 7066

This is what you have to do 

.navigation-menu {
border:1px solid black;
background-color:red;
margin-left:40px;
}

.navigation-menu a{
margin-left:20px;
  }

you are trying to ".navigation-menu" you should use for "a" anchor tagenter image description here

Upvotes: 0

Albzi
Albzi

Reputation: 15609

You can set the line-height:

JSFiddle

.navigation-menu {
    float:right;
    background-color:red;
    line-height:120px;
}

Upvotes: 0

SW4
SW4

Reputation: 71140

Without defining a fixed height, you can change your layout to use display:table to facilitate easier vertical alignment.

Try changing your CSS to:

Demo Fiddle

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
p {
    margin: 0;
}
img {
    display: block;
}
.navigation {
    background-color: yellow;
    display:table;
    width:100%;
}
.logo {
    display:table-cell;
}
.navigation-menu {
    text-align:left;
    display:table-cell;
    text-align:right;
    vertical-align:middle;
}
.navigation-menu a{
    background-color:red;    
    float:right;
    padding:0 5px;
}

Upvotes: 2

Related Questions