I’m trying to vertically align to center text in responsive css menu with a logo on right side. I’ve tried to add “vertical-align: middle” to all appropriate divs (ul, ul li, ul li a), but the problem is that text (menu) stays in almost same position.
The property “vertical-align” is a tough cookie, and will only work for images and content nested in tables. That being said, I would suggest adding a line height equal to the height of your logo image to to the “ul”
You could try putting the line height on the <a>s themselves, and set them to display: block. We’d need to see your full code to know exactly what conditions you are working in, though.
Have you checked what that element is actually for?
No, didn’t checked so far. I’ve tried to find solution on internet and one blog it was described as solution how to add logo with css menu. So, I’ve added it and it seems to work. However I have problems with getting logo and menu automatically vertically aligned to logo. If menu would be fixed, this won’t be a problem, but since it needs to be responsive I don’t know how to make it.
Should I paste all related css in here? Oh and thanks for helping me out…
No, I’ve just started with converting website from psd to html. Since some words in menu will be longer, they should automatically align (vertically) in the middle of logo when changing size of browser - I’m sorry if I don’t find right words to describe what I wish to achieve, so I’ve attached two samples of how menu should look like (first sample is when you shrink down browser and second one is with fully opened browser).
Great I see… This code will work if you add it to the end of your global stylesheet. But, it would be smart to move them thoughtfully into already existing selectors, making it easier to go in and edit your CSS smoothly in the future.
Thanks for help, but this didn’t solved the issue entirely. As you can see on previously mentioned link, menu isn’t fully responsive, as right before you resize browser to tablet size, part of menu (contact) disappears on right side of browser - it should be automatically moved below (as seen on sample page).
ninostar, Thank you for posting the example images. Please try this test page and see if it works the way you wish. There are lots of outlines and borders and one gray background so you can see how everything moves. Tested in IE 8 & 9, Firefox 18 and Chrome 24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?953882-Vertically-align-text-in-responsive-css-menu-%28with-a-logo-on-right%29
Thread: Vertically align text in responsive css menu (with a logo on right)
2013.01.14 09:34
ninostar
-->
<head>
<title>Rolling Menu Items</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
.header {
outline:1px solid #00f;
width:90%;
display:table;
table-layout:fixed;
vertical-align:middle;
margin:0 auto;
}
.logo {
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #0ff;
width:200px;
}
h1 {
background-color:#ddd;
width:200px;
padding:.4em 0 .6em;
margin:0;
}
.menu {
display:table-cell;
text-align:right;
vertical-align:middle;
padding-left:15px;
}
.header ul {
list-style-type:none;
display:inline-block;
border:1px solid #f00;
padding:0;
margin:0;
}
.header li {
border:1px solid #0f0;
float:left;
text-align:left;
font:1em Georgia, serif;
padding:0;
margin:.25em .6em;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"><h1>Logo</h1></div>
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR SERVICES</li>
<li>MAKE YOUR ORDER NOW</li>
<li>MEET OUR TEAM</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</body>
</html>
Thanks for help… your code works fine, but will have to implement it to my design. It’s late here, so will update all of you tomorrow. Again thanks to all for help