...

View Full Version : centering unordered list



efhx
10-01-2006, 08:55 AM
the max width is 728px and i just want it in the center of that.. how do i do this? theres 2 objects in the unordered list if that helps any

felgall
10-01-2006, 09:37 AM
Do you want each element centred separately (in which case you can just style the <li> tags with text-align:center ) or do you want the list centred as a block with the bullets still vertically aligned (in which case you need to style the <ul> tag with width:100px;margin:0 auto; substituting the maximum length of an individual entry for the 100px)

efhx
10-01-2006, 09:45 AM
i want the 2 links to be side by side like this


link#1 link#2


in the center of a 728px width area.. how do i do that?

Arbitrator
10-01-2006, 11:01 AM
i want the 2 links to be side by side like this


link#1 link#2 int he center of a 728px width area.. how do i do that?You would use:


CSS:
#container {
max-width: 728px;
}
#container ul {
display: table;
margin: 0 auto;
}
#container li {
display: table-cell;
}

HTML:
<div id="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>However, Internet Explorer 6 does not support the max-width, display: table, or display: table-cell properties. Internet Explorer 7 RC1 supports max-width, at least.

Another method:


CSS:
#container {
max-width: 728px;
}
#container ul {
text-align: center;
}
#container li {
display: inline; /* or display: inline-block; */
}

HTML:
<div id="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>The #container element is not actually necessary in this example; you could just put set the maximum width on the unordered list element itself. This method has the drawback of collapsed white-space between the list item elements unless you use disorganized markup or comments to separate the list elements. It also means that you can't set dimensions or other block-level properties on the list item elements unless you use display: inline-block, a property that Internet Explorer doesn't support correctly and that Firefox doesn't support at all (even with -moz-inline-block). To get rid of the white-space, you could do something like:


<div id="container">
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li>
</ul>
</div>

or

<div id="container">
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li><!--
--><li>Item 4</li><!--
--><li>Item 5</li>
</ul>
</div>

1andyw
10-01-2006, 03:43 PM
<p style="text-align:center"><a href="/link1.html">Internal Link 1</a><a href="/lin2.html">Internal Link 2</a></p>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum