How do you place a left-aligned unordered list at the center of the page?


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style type="text/css" >
	div { width="100%"; margin: 0 auto; }
	li { text-align: left; }
</style>
</head>
<body>
<div>
<ul>
	<li>Here</li>
	<li>There</li>
	<li>Everywhere</li>
</ul>
</div>
</body>
</html>

The unordered list is left-aligned and at the very left of the page. I want it to be at the very center of the page but still left-aligned. How do I do this?

You’ll probably have to use a fixed width if you want to do it like that, and in either case the following: width=“100%”; is NOT CSS syntax. You’ve mixed it up with XHTML grammar. Meaning to write: width: 100px; or something.

Lose the xml decalaration as that puts IE6 into quirks mode and then just use inline-block to center the list.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test{text-align:center}
.test ul{
	display:inline-block;
	text-align:left;
}
* html .test ul{display:inline}/* ie6 inline-block fix */
*+html .test ul{display:inline}/* ie7 inline-block fix */
</style>
</head>

<body>
<div class="test">
	<ul>
		<li>Here</li>
		<li>There</li>
		<li>Everywhere</li>
	</ul>
</div>

</body>
</html>


1 Like

Now THAT’S how you answer a question! Not only did you completely solve my problem, but you also put in a bunch of helpful bug fixes for different browsers that most definitely should be in there as well. Thanks!