Как центрировать текст внутри элемента li внутри неупорядоченного списка - PullRequest
Новая
       11

Как центрировать текст внутри элемента li внутри неупорядоченного списка

6 голосов
/ 01 марта 2011

Этот список отлично работает для меня, но текст в элементах <li> не центрируется.

Размеры <li> должны автоматически изменяться в соответствии с их содержимым. 

#nav-menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 30px;
    background-image: url(../img/menu_bg.png);
    background-repeat: repeat-x;
    border-bottom: dotted thin #666666;
    border-top: dotted thin #666666;
    text-align: center;
    width: 800px;
}

#nav-menu ul {
    list-style: none;
    padding: 0;
    margin: auto 0;
}

#nav-menu li {
    float: left;
    border-right: dotted thin #666666;
    list-style: none;
    padding: 0.5em 2em 0.5em 0.75em;
}

#nav-menu li a {
    line-height: 1.5em;
    color: #333333;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    display: block;
}
<div id="nav-menu">
    <ul>
        <li class="current_page_item"><a href="#" title="Home">Home</a>
        <li class="current_page_item"><a href="#" title="Home">Home</a>
        <li class="current_page_item"><a href="#" title="Home">Home</a>
        <li class="current_page_item"><a href="#" title="Home">zxczczxczHome</a>
    </ul>
</div>

Ответы [ 2 ]

10 голосов
/ 01 марта 2011

Когда вы присваиваете неравные padding значения слева и справа от li (0.75em и 2em соответственно), текст не может быть центрирован , так как выпринудительное отклонение от центра с помощью padding.

Если вы измените заполнение на: padding: 0.5em 1em; (0.5em сверху и снизу, 1em влево и вправо), тогда его можно отцентрировать. 

#nav-menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 30px;
    background-image: url(../img/menu_bg.png);
    background-repeat: repeat-x;
    border-bottom: dotted thin #666666;
    border-top: dotted thin #666666;
    text-align: center;
    width: 800px;
}

#nav-menu ul {
    list-style: none;
    padding: 0;
    margin: auto 0;
}

#nav-menu li {
    float: left;
    border-right: dotted thin #666666;
    list-style: none;
    padding: 0.5em 1em;
}

#nav-menu li a {
    line-height: 1.5em;
    color: #333333;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    display: block;
}
<div id="nav-menu">
    <ul>
        <li class="current_page_item"><a href="#" title="Home">Home</a></li>
        <li class="current_page_item"><a href="#" title="Home">Home</a></li>
        <li class="current_page_item"><a href="#" title="Home">Home</a></li>
        <li class="current_page_item"><a href="#" title="Home">zxczczxczHome</a></li>
    </ul>
</div>

JSFiddle demo из вышеперечисленного.

6 голосов
/ 01 марта 2011

Если вы хотите использовать различные размеры, измените свойство отступа вправо или влево так, чтобы оно совпадало с другим: 

padding: 0.5em 2em 0.5em 2em;

или 

padding: 0.5em 0.75em 0.5em 0.75em;

Я немного повозился с ним: http://jsfiddle.net/Q32hn/ Не забывайте всегда закрывать свои ListItems

...