Topic: How to align center a floated left unorderd list Pages that link to <a href="https://ozoneasylum.com/backlink?for=29415" title="Pages that link to Topic: How to align center a floated left unorderd list" rel="nofollow" >Topic: How to align center a floated left unorderd list\
 
Author Thread
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

 IP logged posted posted 08-06-2007 00:59 Edit Quote

Hello,
I am trying to center the <li> elements which are floating left (for a horizontal display).
The <ul> container should be 100% width, and the <li> elements than find the center of the ul element.
Here is what I have:

<div id="menu_container">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>

CSS:
div#menu_container
{
text-align:center;
}
div#menu_container ul
{
border:solid;
display:inline;
float:left;
clear:left;
}

div#menu_container ul li
{
padding:2px;
text-align:center;
}


I hope you can help!

Thanks.

Karl..
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 08-06-2007 01:58 Edit Quote

Can you not use display: inline; instead of float: left; on the li's?
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

 IP logged posted posted 08-06-2007 08:32 Edit Quote

Yes, I can! For some reason, I believed that float:left was the only option... Let me give that a try now... I'll report back with success or fail.

Thanks!
tastech
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Dec 2010

 IP logged posted posted 12-29-2010 15:17 Edit Quote

Hi Everyone

I am also having a similar problem placing a horizontal menu in the center of the screen, the above appears to work fine with text only in the menu until I add a background image:

My HTML code is as follows:

<body>
<ul id="center">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
</ul>
</body>

The Stylesheet for the above is as follows:

@charset "utf-8";
/* CSS Document */
ul#center{
position:fixed;
bottom:0px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
width:100%;
background-color:#b0e0e6;
list-style:none;
text-align:center;
}
/* Clears the bottom margin and padding around your ul's and li's */
ul#center, ul#center ul {
margin: 0;
padding: 0;
list-style: none;
text-align:center;
display:inline;
}
/* End of ul's and li's margin and padding clearing */
ul#center li{
position:relative;
display:inline;
width:98px;
height:30px;
text-align:center;
}
ul#center li a {
display:block;
font-family:Arial, Helvetica, sans-serif;
outline:0;
text-shadow:1px 1px 1px #000;
text-decoration: none;
color: #ffffff;
height:30px;
line-height:30px;
width:98px;
text-align:center;
background:url('../images/image.jpg') no-repeat 0 0;
}

You may try it out with own image in place of image.jpg.

Thanks


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu