Topic: How to align center a floated left unorderd list (Page 1 of 1) $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 (Page 1 of 1)" rel="nofollow" >Topic: How to align center a floated left unorderd list <span class="small">(Page 1 of 1)</span>\$

Karl Bipolar (III) Inmate From: Phoenix Insane since: Jul 2001	posted 08-06-2007 00:59 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	posted 08-06-2007 01:58 Can you not use display: inline; instead of float: left; on the li's?
Karl Bipolar (III) Inmate From: Phoenix Insane since: Jul 2001	posted 08-06-2007 08:32 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	posted 12-29-2010 15:17 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

Topic: How to align center a floated left unorderd list (Page 1 of 1) $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 (Page 1 of 1)" rel="nofollow" >Topic: How to align center a floated left unorderd list <span class="small">(Page 1 of 1)</span>\$

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted 08-06-2007 00:59

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

posted 08-06-2007 01:58

Can you not use display: inline; instead of float: left; on the li's?

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted 08-06-2007 08:32

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

posted 12-29-2010 15:17

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:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: How to align center a floated left unorderd list (Page 1 of 1)

Insert Slimies »

Insert UBB Code »