Vertically align text in responsive css menu (with a logo on right)

Hi,

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.

Regards

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”

It might look something like this…


ul {
 list-style: none;
 line-height: 50px;
}

img{
 height: 50px;
 width: 150px;
}

Hi,

Thanks for reply… sadly that didn’t worked. Menu even got broader then it was before.

I use hgroup tag and ul in one div tag.

<div id="menu">
      <a href="/index.html">
      <hgroup id="title">
        <img id="logo" src="images/logo.png"/>
      </hgroup>
      </a>
      <ul>
        <li class="selected"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Order</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

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…

Ideally a link, or the full page code (with CSS in the head), so we can see this in context.

Here’s the link to what I’m doing:
http://ninostar.atwebpages.com/

Cool. OK, try this:

#menu ul {margin: 0; float: right;}

#menu ul li {float: left;}

#menu li a {display: block; line-height: 70px;}

Hmm, seems not to work when resizing browser down… have uploaded new css on provided link

The menu has to drop when there’s no longer room for it. You need to decide what you want to do when it gets too wide for the space available.

Don’t I do that with “float: left/right”? Menu should move below like it did before, but it should auto align (vertically) when that happens…

Auto align with what, though?

ninostar, there doesn’t seem to be any code that tells the page how to behave below a width of about 752px. Is that the issue?

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).

http://ninostar.atwebpages.com/sample.html

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.


#menu {
  min-width: 700px;
}

 div#slider div#menu ul{
  padding: 0;
  border: 1px solid red;
  float: left;
}

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).

http://ninostar.atwebpages.com/sample2.html

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. :slight_smile: 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 :wink:

Nice work, Ron. An interesting solution to study. :slight_smile:

[ot]

I hope that’s a good thing. :slight_smile: The code seems a bit complicated, so I imagine there is an easier way to accomplish this. It’s a start, though.[/ot]