Vertically centre text

44 Posts

kittie Reply #1, 17 years, 4 months ago

How do I vertically centre the text within a navigation button? I’m currently using line-height which doesn’t work for longer text that spans two or more lines.

MODX Staff
12,272 Posts

Ryan Thrash Reply #2, 17 years, 4 months ago

Do you know the height of the containing box space, or is it arbitrary?

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

44 Posts

kittie Reply #3, 17 years, 4 months ago

The height is currently fixed at 35px

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 17 years, 4 months ago

There are a few ways you can do this; I usually use line-height:35px in a case like this.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

2,314 Posts

anonymized-26931 Reply #5, 17 years, 4 months ago

Hi kittie,

there’s an article on this topic -> http://css-tricks.com/vertically-center-multi-lined-text/

j

44 Posts

kittie Reply #6, 17 years, 4 months ago

Thanks Sharkbait. I’ve managed to vertically centre the main navigation but am having trouble centering the dropdowns, here is my code:

/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family: arial, sans-serif;
width:941px;
margin:0;
margin:0 0 0 0;
position:relative;
z-index:100;
}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}

/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}

/* style the links to be 134px wide by 35px high. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:134px;
height:35px;
color: #FFFFFF;
font-size:11px;
text-transform:uppercase;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}

/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background: url(../../../../templates/default/images/nav_over.jpg);
}

/* style the active button */
.menu ul li.active a {
background: url(../../../../templates/default/images/nav_over.jpg);
}

/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
position:absolute;
top:35px;
left:0;
width:105px;
display: table-cell;
vertical-align: middle;
}

/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
color:#fff;
background: url(../../../../templates/default/images/nav_bg_green.jpg);
}

.menu ul li:hover ul li a:hover {
background: url(../../../../templates/default/images/nav_over.jpg);
color:#fff;
}

2,314 Posts

anonymized-26931 Reply #7, 17 years, 4 months ago

hi kittie,

try to add

.menu ul li ul li a {
display: table-cell;
vertical-align: middle;
}

to your css-file

can you post a link to that website?

j

44 Posts

kittie Reply #8, 17 years, 4 months ago

Hi Sharkbait,

I’ve added the code and seen no difference. Website can be found here http://ltcc.dotty.net.nz.

Thanks

24,544 Posts

BobRay Reply #9, 17 years, 4 months ago

You might want to make the site validate first. Many of the errors are trivial but some could be related to your problem:

http://validator.w3.org/check?uri=http%3A%2F%2Fltcc.dotty.net.nz%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Also, the top menu is wrong in IE7, the text for the menu items is pushed to the left side.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

24,544 Posts

BobRay Reply #10, 17 years, 4 months ago

Quote from: kittie at May 22, 2009, 04:05 PM

Hi Sharkbait,

I’ve added the code and seen no difference. Website can be found here http://ltcc.dotty.net.nz.

Thanks

BTW, it looks like the critical .css section for the drop-down items is this one (line 74):

.menu li:hover ul li a:hover

I think that’s where you’ll want the code Sharkbait is suggesting.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting