Center Menu Text

Permalink Browser Info Environment
In the menu options you can align the text LEFT or RIGHT. That is great, but I want to align the menu items to the CENTER. I've looked all over in the CSS to see if I couldn't determine a way to do this, even added a div align center tag around the block in my template and that didn't do it. I could stretch it the length of the page, but I don't want that effect - spacing is great as is, just want it centered.

Ideas?

Type: Discussion
Status: New
plschneide
View Replies:
ryan replied on at Permalink Reply 1 Attachment
ryan
I'm assuming you want the entire menu centered, not the text within each menu element.

To get the ul element centered within it's container div you need to specify a width for the menu. This makes it a little less flexible because when you add new top level elements you'd need to change that width.

Here's some example css:

<style>
div#header-area-inside div ul.sf-menu {
  margin-left:auto;
  margin-right:auto;
  width:300px;
  float:none;
}
</style>
<? ?>


see the attached screenshot to see the results.
plschneide replied on at Permalink Reply
plschneide
Hi -thanks - this is exactly what I needed. Worked great. I would have never guessed that!!!
ryan replied on at Permalink Reply 1 Attachment
ryan
And here's a centered text example:

<style>
div#header-area-inside div ul.sf-menu li { text-align:center; }
</style>
<? ?>

see screenshot

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.