CSS text-выравнивание не работает

у меня есть этот код css здесь

.navigation{
    width:100%;
    background-color:#7a7a7a;
    font-size:18px;
}

.navigation ul {
    list-style-type: none;
    margin: 0;
}

.navigation li {
    float: left;
}


.navigation ul a {
    color: #ffffff;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}

то, что я пытаюсь сделать, - это центр моего класса навигация. Я пробовал использовать text-align:center; и vertical-align:middle; но ни один из них не работал.

и вот HTML код

<div class="navigation">
<ul>
<li><a href="http://surfthecurve.ca/">home</a></li>
<li><a href="http://surfthecurve.ca/?page_id=7">about</a></li>
<li><a href="http://surfthecurve.ca/?page_id=9">tutors</a></li>
<li><a href="http://surfthecurve.ca/?page_id=11">students</a></li>
<li><a href="http://surfthecurve.ca/?page_id=13">contact us</a></li>
</ul>
</div><!--navigation-->

когда я говорю, что он не работает, я имею в виду текст выравнивание по левому.

8
css text-align text-alignment

3 ответов

измените правило на свой <a> элемент:

.navigation ul a {
    color: #000;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}​

to

.navigation ul a {
    color: #000;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
    width:100%;
    text-align:center;
}​

просто добавьте два новых правила (width:100%; и text-align:center;). Вам нужно сделать якорь развернутым, чтобы занять всю ширину элемента списка, а затем выровнять его по центру текста.

пример jsFiddle

15

вы должны сделать UL внутри div вести себя как блок. Попробуйте добавить

.navigation ul {
     display: inline-block;
}
7

Я стараюсь избегать плавающих элементов, если это действительно нужно. Потому что вы плавали <li> Они не в норме поток.

если добавить .navigation { text-align:center; }, и .navigation li { float: left; } to .navigation li { display: inline-block; } тогда вся навигация будет центрирована.

одно предостережение к этому подходу заключается в том, что display: inline-block; не поддерживается в IE6 и нуждается в обходном пути, чтобы заставить его работать в IE7.

3