Почему мой текст не находится в середине блоков на панели навигации? Что я делаю не так?

Я хочу, чтобы текст находился в центре, но все они, похоже, торчат поверх навигационной панели. смотреть мое изображение прилагается. Пожалуйста, скажите мне, что я делаю неправильно. Редактировать: Я не могу прикрепить изображение, так как у меня нет 10 репутаций.Почему мой текст не находится в середине блоков на панели навигации? Что я делаю не так?

body { 
 
    background-color: white; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
a:link, 
 
a:visited { 
 
    display: block; 
 
    padding: 0; 
 
    width: 200px; 
 
    height: 30px; 
 
    background-color: blue; 
 
    text-decoration: none; 
 
    font-family: arial; 
 
    color: white; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 
a:hover, 
 
a:active { 
 
    background-color: green; 
 
}

<body> 
 
    <ul> 
 
    <li> <a href="#"> Home </a> 
 
    </li> 
 
    <li> <a href="#"> Products </a> 
 
    </li> 
 
    <li> <a href="#"> Services </a> 
 
    </li> 
 
    <li> <a href="#"> Contact us </a> 
 
    </li> 
 
    <li> <a href="#"> About us </a> 
 
    </li> 
 
    <li> <a href="#"> Blog </a> 
 
    </li> 
 
    </ul> 
 
</body>

источник

2015-01-01 Summer

Вы можете добавить скрипку и показать нам? – Tushar

сторона примечание: цвет фона: ** синий ** нет ** # синий ** (исправленный) –

использование line-height же имеет height для выравнивания текста 'а' по вертикали к центру.

установить стиль на a или a:link, a:visited

a { 
    line-height: 30px; 
}

jsfiddle demo

Screenshot of centered text

источник

2015-01-01 06:47:40

Из-за того, что вы дали padding:0 the text is sticking to the top.

поэтому я изменил две вещи, и это работает для меня.

padding:5px 0px; 
height:20px;//To make your `li height 30px`

Fiddle: Text at center

источник

2015-01-01 06:45:33

вид работ. Но текст по-прежнему не отображается в центре. Теперь панель навигации увеличила свою ширину. Я хотел, чтобы исходная ширина, но текст находился в самом центре каждого блока. – Summer

@Summer :: Я тоже проверил с Firebug. Он работает правильно. В качестве отступов сверху и снизу 5 каждый так 10px и высота 20px, поэтому в общей сложности 30px по сравнению с оригиналом. Если вы все еще хотите посередине, вы можете увеличить отступы и уменьшить высоту. –

Я думаю, что это то, что вы хотите ... Просто добавьте padding-top к anchor тега.

body { 
 
    background-color: white; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
a:link, 
 
a:visited { 
 
    display: block; 
 
    width: 200px; 
 
    height: 30px; 
 
    background-color: blue; 
 
    text-decoration: none; 
 
    font-family: arial; 
 
    color: white; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    padding-top:12px; 
 
} 
 
a:hover, 
 
a:active { 
 
    background-color: green; 
 
}

<body> 
 
    <ul> 
 
    <li> <a href="#"> Home </a> 
 
    </li> 
 
    <li> <a href="#"> Products </a> 
 
    </li> 
 
    <li> <a href="#"> Services </a> 
 
    </li> 
 
    <li> <a href="#"> Contact us </a> 
 
    </li> 
 
    <li> <a href="#"> About us </a> 
 
    </li> 
 
    <li> <a href="#"> Blog </a> 
 
    </li> 
 
    </ul> 
 
</body>

источник

2015-01-01 06:46:57 Tushar

add line height to a tag 

<style> 
    body { 
    background-color: white; 
} 
ul { 
    list-style-type: none; 
} 
li { 
    float: left; 
} 
a:link, 
a:visited { 
    display: block; 
    padding: 0; 
    width: 200px; 
    height: 30px; 
    line-height: 30px; 
    background-color: blue; 
    text-decoration: none; 
    font-family: arial; 
    color: white; 
    font-weight: bold; 
    text-align: center; 
} 
a:hover, 
a:active { 
    background-color: green; 
} 
</style>

источник

2015-01-01 06:48:44