Center alignment of the menu

Question

Center alignment of the menu

Help align the css menu in the center. I tried everything, nothing comes out, maybe you will. Here is the code.

.hovermenu ul {
    font: 20px verdana;
    padding - left: 0;
    margin - left: 0;
    height: 20px;
}

.hovermenu ul li {
    list - style: none;
    display: inline;
}

.hovermenu ul li a {
    padding: 9px 0.5em;
    text - decoration: none;
    float: left;
    color: black;
    background - color: transparent;
    border: px solid transparent;
}

.hovermenu ul li a: hover {
    background - color: #1E90FF;

}

html>body .hovermenu ul li a:active{ /* эффект при наведении мыши */
border-style: solid;
}

0

html css

Author: Nicolas Chabanovsky, 2012-05-31

Source

2 answers

score 3 · Answer 1

Poorly separated. float:left - for a is superfluous, you already have display:inline for li, everything will be in line and so on. After that, you need to center the contents of ul, add:

.hovermenu {text-align:center}

Upd. or better:

.hovermenu ul {text-align:center}

See here

score 0 · Answer 2

Fixed it a bit. Here's what happened. With vertical alignment, I think you can handle it =)

<head>
<style type="text/css">.hovermenu ul{

font: 20px verdana;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 9px 0.5em;
text-decoration: none;

color: black;
background-color: transparent;
border: px solid transparent;
}

.hovermenu ul li a:hover{
background-color:#1E90FF;

}

html>body .hovermenu ul li a:active{ /* эффект при наведении мыши */
border-style: solid;
}
</style>
</head>
<body style="background-image:url(http://s2.ipicture.ru/uploads/20120531/pbb8FT9l.jpg);background-repeat:repeat-x repeat-x">
<!-- Save for Web Slices (ВСЕЕЕЕЕЕЕЕЕЕЕ.psd) -->

<head>

<body style="color:Yellow; background-color:#FFFFFF "><div class="hovermenu">
<table style="height:100%;width:100%;">
    <tr><td style="text-align:center;">
<ul>
<li><a href="#">Мои лоты</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Добавить в избранное</a></li>
<li><a href="#">Задать вопрос</a></li>
</ul>
        </td></tr>
 </table>
</div>

<!-- End Save for Web Slices -->
</body>