Welcome to WebmasterWorld Guest from 18.208.159.25

Forum Moderators: not2easy

Message Too Old, No Replies

Centre logo in between menu items

     
10:05 am on Nov 7, 2014 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


I have a menu with 3 menu items either side of a centred logo and I need the logo to be completely centred in the browser window (vertically) but as the 3 menu items either side are slightly different lengths in text I'm unable to figure out how to do this. I've hunted around the web but all the ones that I've found seem to have menu items with pretty much exact same lengths of text on either side.

Here's my initial code but as you can see I've really only managed to centre the logo and the menu but not in relation to each other.

It might also be that the menu items text changes in length so this also needs to be accounted for.

Any ideas on where to start or any help would be greatly appreciated.


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#branding {
position: absolute;
width: 100px;
height: 100px;
top: 20px;
left: 50%;
margin-left: -50px;
background: red;
background-size: 100% auto;
}
nav#access {
display: table;
margin: 0 auto;
margin-top: 20px;
}

nav#access li {
display: inline-block;
padding: 0 30px;
}

nav#access li:nth-child(3) {
padding-right: 80px;
}

nav#access li:nth-child(4) {
padding-left: 80px;
}
</style>
</head>
<body class="">
<header id="site" class="cf">
<nav id="access">
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li id="menu-item-10" class=""><a href="#">About</a></li>
<li id="menu-item-11" class=""><a href="#">Why Shop with us</a></li>
<li id="menu-item-12" class=""><a href="#">Products</a></li>
<li id="menu-item-13" class="hspace"><a href="#">faqs</a></li>
<li id="menu-item-14" class=""><a href="#">Blog</a></li>
<li id="menu-item-15" class=""><a href="#">Contact</a></li>
</ul>
</div>
<div id="branding"></div>
</nav>
</header>
</body>
</html>
10:27 am on Nov 7, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Mar 9, 2003
posts:2099
votes: 10


I need the logo to be completely centred in the browser window (vertically)


Vertically or horizontally?
10:40 am on Nov 7, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15893
votes: 876


Hurry, ronin, you've only got 48 minutes left to edit your post.

{display: table-cell;} is often the easiest way to allow vertical centering. Especially when you're already using {display: table} for a parent element. Yes, you can have "table" and "table-cell" without an intervening "table-row".
10:52 am on Nov 7, 2014 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


The main problem I'm facing is getting the text on either side of the logo. I think this would be straight forward if the text either side was of equal length but when they're not (as in the case above) then having equal spacing between everything doesn't seem possible?
3:41 pm on Nov 7, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:958
votes: 33


You'll make yourself nuts trying to visually shoehorn the logo in the middle of the menu that way. Try:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* { margin:0; padding:0; }

nav {
height:100px;
background-color:#eee;
}

#branding {
float:left;
position: relative;
width: 34%;
height: 100px;
background: red;
text-align:center;
line-height:100px;
}
#branding img { height:50px; vertical-align:middle; }

nav ul {
float:left;
width:33%;
margin-top: 30px;
}

nav ul li {
float:left;
width:33%;
list-style:none;
text-align:center;
}


</style>
</head>
<body class="">
<header id="site" class="cf">
<nav id="access">
<ul id="menu-menu1" class="menu">
<li id="menu-item-10" class=""><a href="#">About</a></li>
<li id="menu-item-11" class=""><a href="#">Why Shop with us</a></li>
<li id="menu-item-12" class=""><a href="#">Products</a></li>
</ul>
<div id="branding"><img src="http://www.webmasterworld.com/gfx/logo.png"></div>
<ul id="menu-menu2" class="menu">
<li id="menu-item-13" class="hspace"><a href="#">faqs</a></li>
<li id="menu-item-14" class=""><a href="#">Blog</a></li>
<li id="menu-item-15" class=""><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>