Aligning logo image with navigation bar
Question
I would like to align logo image with navigation bar so that logo is on left and navigation bar at the center. You can see here what I have tried: http://jsfiddle.net/4fTwh/
HTML:
<body>
<div class="navigation">
<p> <img class="logo-img" src="http://icons.iconarchive.com/icons/tatice/browsers/128/Google-Chrome-icon.png" alt="Logo">
<ul id="nav-list">
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</p>
</div>
</body>
CSS:
.navigation{
width: 100%;
text-align: center;
background-color: #CEE3F6;
}
#nav-list{
list-style-type: none;
}
#nav-list li{
display: inline;
font-size: 18px;
margin: 20px;
}
.logo-img{
float: left;
margin: 0px 15px 15px 0px;
}
Now, I would like for navigation bar text to be bottom aligned with logo image. And also that colored background to be height of the image (not lower around navigation bar text, as it is now). So basically, how to wrap together logo(on left) and navigation bar(centered) so that background is height of higher of these two elements?
4 answers
solution1
2 ACCPTED 2014-07-03 08:34:32
Try like this: DEMO
.navigation {
width: 100%;
text-align: center;
background-color: #CEE3F6;
vertical-align:bottom;
line-height:120px;
height:120px;
}
#nav-list li {
display: inline-block;
font-size: 18px;
margin: 20px;
vertical-align:bottom;
line-height:normal;
}
.logo-img {
position:absolute;
left:10px;
top:10px;
margin: 0px 15px 15px 0px;
}
solution2
1 2014-07-03 08:25:03
You looking for something like this?
#nav-list{
list-style-type: none;
background: url('http://icons.iconarchive.com/icons/tatice/browsers/128/Google-Chrome-icon.png') no-repeat;
padding: 102px 0 0 0;
}
solution3
1 2014-07-03 08:29:06
You can try this:
.logo{
display:inline-block;
float:left
}
#nav-list{
margin-top:55px;
list-style-type: none;
float:left; display:inline-block;
}
solution4
1 2014-07-03 08:39:16
In your HTML I would remove the <p> tag. It doesn't add any value here.
You CSS is almost there. Below are the alterations I made to it.
.navigation{
width: 100%;
text-align: center;
background-color: #CEE3F6;
overflow: hidden /* This Allows for the Background to span the entire height */
}
#nav-list{
list-style-type: none;
float: left; /* Keeps the elements side by side*/
margin-bottom: 0 /* fix the spacing to allow the menu to be at the bottom */
}
#nav-list li{
float: left; /* allows the li tags to be side by side. */
font-size: 18px;
margin: 20px 20px 0 0; /* Fixed a little of the spacing, etc. */
padding:69px 0 0 0 /* Moved the LI down to be at the bottom*/
}
.logo-img{
float: left;
margin: 0px 15px 0 0px; /* fixed the spacing. */
}
Here is the jsFiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.