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

polyhedra
—
2013-01-14T16:18:50Z —
#2

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.

ninostar said:

I use hgroup tag ...

Have you checked what that element is actually for?

ninostar
—
2013-01-14T22:04:40Z —
#5

ralph_m said:

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

ralphm
—
2013-01-14T22:07:06Z —
#6

ninostar said:

Should I paste all related css in here?

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

ninostar
—
2013-01-14T22:35:19Z —
#7

ralph_m said:

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

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

ralphm
—
2013-01-14T23:12:54Z —
#10

ninostar said:

Hmm, seems not to work when resizing browser down...

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.

ninostar
—
2013-01-14T23:19:07Z —
#11

ralph_m said:

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

ralphm
—
2013-01-14T23:52:46Z —
#12

ninostar said:

it should auto align (vertically) when that happens...

Auto align with what, though?

ronpat
—
2013-01-14T23:53:36Z —
#13

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?

ninostar
—
2013-01-15T08:28:11Z —
#14

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