Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

align center a list 1

Status
Not open for further replies.
tyutghf

tyutghf

Technical User
Apr 12, 2008
258
GB
I am building a navigation that will be used in a CMS so items may be added and removed.

The navigation is to be center aligned
I am using a list to display the menu items

The menu items need to be of a set height so I need to use display: inline-block and float left, but this then obviously makes everything display form the left.

If I used display: inline and no float left it all works correctly but then I can`t set the height of the li.

Here is my code

css

#menu-main-menu {position: relative; margin: -3px 0px 0px 0px; padding: 0px; height: 35px; font-size: 1.4em; font-weight: bold; text-align:center; list-style:none; background: #033c4e url(images/nav-background.jpg) repeat-x;}
#menu-main-menu li {display:inline-block; float: left; line-height: 35px; height: 35px; background-color: #cc0000;}
#menu-main-menu a {margin: 0px 15px 0px 15px; color: #ffffff}

html

<ul id="menu-main-menu">
<li id="menu-item-25" class="menu-item menu-item-type-post_type"><a href="/">menu 1</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type"><a href="/">menu 2</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type"><a href="/">menu 2</a></li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type"><a href="/">menu 4</a></li>
</ul>


Is there a way to remain center aligned but maintain a height on the li?
 
Sort by date Sort by votes
1. You can use line-height instead of height to determine the height of the element. This will work well if your text does not span more than one line.

2. I thought using inline-block makes it unnecessary to use floats. Since it is a block-level element it has width and height applied to it, but since it's also inline, it acts like any other inline element.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I don`t really want to assign and width as some menu items will be several words and others will be just one short word.

#menu-main-menu li {display:inline-block; line-height: 35px; height: 35px; background-color: #cc0000;} makes each <li> the width of the ul.

Is there a way around it?
 
Upvote 0 Downvote
Here is what I am playing with

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<style>
#wrapper {position:relative; margin: 0 auto; top:0px; width:861px;}
#menu-main-menu {position: relative; margin: -3px 0px 0px 0px; padding: 0px; height: 35px; font-size: 1.4em; font-weight: bold; text-align:center; list-style:none; background: #033c4e url(images/nav-background.jpg) repeat-x;}
#menu-main-menu li {display:inline-block; line-height: 35px; height: 35px; border-right: 1px solid #cc0000; }
#menu-main-menu a {margin: 0px 15px 0px 15px; color: #ffffff}
</style>
</head>

<body>

<div id='wrapper'>

<ul id="menu-main-menu">
   <li id="menu-item-25" class="menu-item menu-item-type-post_type"><a href="/">Menu 1</a></li>
   <li id="menu-item-27" class="menu-item menu-item-type-post_type"><a href="/">Longer menu item 2</a></li>
   <li id="menu-item-26" class="menu-item menu-item-type-post_type"><a href="/">Menu 3</a></li>
   <li id="menu-item-24" class="menu-item menu-item-type-post_type"><a href="/">Menu 4</a></li>
</ul>

</div>

</body>
</html>

In the CMS they are able to add/remove/rename the menu items so I want them to be centralised, fixed height so I can use border-right to seperate them with a line that is full height of the nav area but variable width so menu items with more text take up more space.
 
Upvote 0 Downvote
[tt]Width: auto;[/tt] is what should work, although that command is incredibly fidgety when it comes to implementation in the browsers. However, if you're using line-height, you could just remove the display property and leave links in inline mode... that should work.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Thanks for the suggestion Vragabond, I tried width: auto which didn`t work for me and also removed the display property with no luck.
 
Upvote 0 Downvote
Sorry, you should not delete the display property, rather change it to [tt]display: inline[/tt] for list item. The width of list items should then be reset to the inline element, that is as wide as the content, and line height should keep the height of the element. If the parent element (ul) has text-align: center; specified, all list items will then be centered.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
813
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
255
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
830
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
807
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top