# How to centre Horizontal menu

**URL:** <https://forum.kirupa.com/t/how-to-centre-horizontal-menu/327537>\
**Category:** web dev\
**Created:** [March 7, 2012, 9:41pm UTC](https://forum.kirupa.com/t/how-to-centre-horizontal-menu/327537 "2012-03-07T21:41:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![catcat31](https://avatars.discourse-cdn.com/v4/letter/c/ea5d25/32.png) [@catcat31](https://forum.kirupa.com/u/catcat31)\
**Post date:** [March 7, 2012, 9:41pm UTC](https://forum.kirupa.com/t/how-to-centre-horizontal-menu/327537/1 "2012-03-07T21:41:51Z")

</div>

I’m using the following to create my horizontal menu. How do I centre it in the middle rather than over to the left of the page.

Also the way this css is set up it interfers with my other link code. How can I just associate the menu links with code below so it doesn’t style other links?

\<html\>  
\<head\>  
\<style type=“text/css”\>  
ul  
{  
list-style-type:none;  
margin:0;  
padding:0;  
overflow:hidden;  
}  
li  
{  
float:left;  
}  
a:link,a:visited  
{  
display:block;  
width:120px;  
font-weight:bold;  
color:#FFFFFF;  
background-color:#98bf21;  
text-align:center;  
padding:4px;  
text-decoration:none;  
text-transform:uppercase;  
}  
a:hover,a:active  
{  
background-color:#7A991A;  
}  
\</style\>  
\</head\>  
\<body\>  
\<ul\>  
\<li\>\<a href="#home"\>Home\</a\>\</li\>  
\<li\>\<a href="#news"\>News\</a\>\</li\>  
\<li\>\<a href="#contact"\>Contact\</a\>\</li\>  
\<li\>\<a href="#about"\>About\</a\>\</li\>  
\</ul\>  
\</body\>  
\</html\>