|
|
Posted by Ben C on 10/18/06 13:49
On 2006-10-18, djcredo@gmail.com <djcredo@gmail.com> wrote:
> I have a rollover list which needs to be centered. I cannot use
> display:inline, because I must be able to ensure the width of each list
> item is eactly 100px. Inline doesnt let you specify width, and if you
> use margin-left and margin-right you can't be sure you are getting the
> right size because the width will depend on the number of characters in
> the list item.
>
> So I want to use "float:left" with "display:block" items. Now I can
> specify the width, but can't center the items! They all stack up on the
> left hand side.
Yes, you could say they all "float" to the left :)
> Does anyone have any solutions to this problem?
Don't use floats. You can give a float a left margin, but you will have
to work out how big to make it yourself to achieve centering (don't go
there). Absolute positioning is much better for this because the browser
will centre it for you if you set left and right margins to auto
(provided you also set left, right and width).
Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
ul
{
position: absolute;
left: 0px;
right: 0px;
width: 100px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
li
{
list-style-type: none;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>apples</li>
<li>pears</li>
<li>oranges</li>
</ul>
</body>
</html>
Navigation:
[Reply to this message]
|