Centering a horizontal bullet list
Horizontal bullet lists are often used to create a horizontal menu. This is how to make the horizontal bullet list centered.
- Create a <div> container and set the text-align: center style on it.
- Create a <ul> <li> inside the div and set display: inline-block style on it.
This is an example of how it is done:
<html>
<head>
<style type="text/css">
div#container {
text-align: center; /* center the horisontal list */
}
ul.list {
list-style: none; /* no bullets */
display: inline-block; /* this will cause the list to be centered */
}
ul.list li {
float: left; /* horizontal list */
margin-left: 10px; /* some space between items */
margin-right: 10px;
}
</style>
</head>
<body>
<div id="container">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
Leave a Reply
Want to join the discussion?Feel free to contribute!