Posts

Stefan Helander

Centering a horizontal bullet list

/0 Comments/in /by

Horizontal bullet lists are often used to create a horizontal menu. This is how to make the horizontal bullet list centered.

  1. Create a <div> container and set the text-align: center style on it.
  2. 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>