/    Sign up×
Community /Pin to ProfileBookmark

How do you center floats?

Copy linkTweet thisAlerts:
Mar 28.2006

Is that possible?

For example, if I have a navigation bar made up of list items like this:

<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>

and they’re all floated to the left. Now if you want the list items to be centered within the window, is that possible without using javascript?

margin-left: auto; margin-right: auto don’t work on floats.
Text-align center on the ul element also doesn’t make any difference, but yet, there are cases when you want the links of the <li>s to be centered, so doesn’t CSS provide any way to do that?

thanks

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@jpmoriartyMar 28.2006 — Think you need to put a "display:block" in with your UL element, e.g.

#navigation ul {

margin: 0px 3px 3px 0px;

padding: 5px 0px 3px 0px;

display: block;

width: 120px;

text-align:center;

}
Copy linkTweet thisAlerts:
@thewebmanMar 28.2006 — or you can put it in a div like this:

[code=html]<div id="center">
<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</div>[/code]
and this css:
[code=html]
#center {
width: 780px;
margin-left: auto;
margin-right: auto;
}
[/code]
Copy linkTweet thisAlerts:
@toicontienMar 28.2006 — Think you need to put a "display:block" in with your UL element, e.g.

#navigation ul {

margin: 0px 3px 3px 0px;

padding: 5px 0px 3px 0px;

display: block;

width: 120px;

text-align:center;

}[/QUOTE]
UL elements are block elements unless you change them using CSS.

The text-align CSS property is meant to align inline elements within a block element. LI tags, and any tag when it's floated, is a block level element. If you use text-align: center and it works on block elements in Internet Explorer, that's because IE has it wrong.

You can center a block element using the method that thewebman mentioned. Give a block element a width and set it's left and right margins to auto, however the float CSS property overrides auto left and right margins.
Copy linkTweet thisAlerts:
@ray326Mar 28.2006 — Give the items a width and text-align:center. As stated above, the list tags are block elements.
Copy linkTweet thisAlerts:
@augustauthorMar 28.2006 — Actually there's been some more confusion, but that's because I might want (am not sure yet, but wanted to know) a nav bar to extend across the browser window. So if a div contains the ul and has a pixel width it will be shorter than the browser window.


For instance the following markup has weird results:

<ul>

<li></li>

<li></li>

<li></li>

<ul>

with the styles:

ul {float: left: width: 100%; margin: 0;}

li {float: left; font-size: 14px;}



For some illogical reason the ul extends fare beyond the right edge of the browser window, as though given a width of 200%. Then if I stop floating the ul and don't give it a set width, it collapses completely and makes it even worse. The div around the ul also collapses unless it's being floated, and if it's floated it must have an explicit width which is 100% in this case and causes the page to become three pages wide.

These are the kind of things that make tables a way better method for layout.
Copy linkTweet thisAlerts:
@toicontienMar 28.2006 — At this point you need to post the HTML and CSS used on your page. Perhaps floats aren't what you need.
Copy linkTweet thisAlerts:
@augustauthorMar 28.2006 — Ok, thanks.


[COLOR=darkSlateBlue]html (portion):[/COLOR]

<div id="header>">

<h2>Title</h2>

<ul id="navlinks">

<li ><a href="">Home </a></li>

<li><a href="">About us</a> </li>

<li><a href="">Products</a> </li>

<li><a href="">FAQ</a> </li>

<li><a href="">Contact us</a></li>

</ul>

</div>

[COLOR=darkSlateBlue]css (simplified):[/COLOR]

h2 {padding: 1em;}

ul {float: left; width: 100%; margin: 0;

list-style: none; text-align: center;

background: #606060;}

li {float: left; margin: 0 0.5em;}

a {font-size: small; color: #000000;}


I'd like to have the ul be as wide as the view port, no more/no less. And also the list items to be centered in the window. (have tried padding-left with ems on them but that's obviously not a good solution).


Thanks for helping.
Copy linkTweet thisAlerts:
@ray326Mar 29.2006 — You don't need to float either one.

ul { margin:0; padding:0; list-style:none; background: #606060; }

li { margin:0 0.5em; text-align:center; }

li a { display:block; text-align:center; }

Untested but should be close.
Copy linkTweet thisAlerts:
@augustauthorMar 29.2006 — Do you mean that the blocklevel links will make the bar horizontal without floating the list items?

Is display: block even safe to use? (always hear something about internet explorer not getting css correctly)
×

Success!

Help @august spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...