How to Center a Horizontal List in Div in CSS
When creating a Web page, it can be helpful to use CSS to center a horizontal list, such as a click-able menu. You can use CSS, which is a style sheet language, alongside HTML to control the appearance of your Web page. CSS styles are often displayed unpredictably on different Web browsers, so it's important to test out your Web page thoroughly before posting it. An unordered list (ul) is a block-level element, so you can use the width property to create a centered effect.
Other People Are Reading
Instructions
-
-
1
Open your HTML file in a text editor such as Windows Notepad.
-
2
Add the necessary CSS styles for the horizontal list in the "<head>" section of your HTML file by adding the following code:
<style type="text/css">
.myclass
{
text-align: center;
}
.myclass ul
{
width: 275px;
margin: 0px auto
}
.myclass li
{
display: block;
float: left;
height: 50px;
line-height: 50px;
margin: 5px;
width: 125px;
border: solid 1px black;
}
</style>
The width of the list (ul) is the sum of the width and margins of the horizontal items (li).
-
-
3
Create a horizontal list in the "<body>" section of the HTML file by adding the following code:
<div class="myclass">
<ul>
<li>first item</li>
<li><div>second item in div</div></li>
</ul>
</div>
The "ul" tag specifies an unordered list. The "li" tag corresponds to an item in the list. The list items use the matching CSS styles defined above.
-
4
Save the HTML file and load it on your Web server to view the centered horizontal list.
-
1
