выравнивание по вертикали внутри тега <li>

Question

выравнивание по вертикали внутри тега <li>

0

HTML:

<div id="navbar">
 <div id="container">
  <ul style="height:40px">
    <li><p id="navtext">Home</p></li>
  </ul>
 </div>
</div>

CSS:

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li {
    float:left;
}
#navtext {
    color:#FFFFFF;
    padding-bottom:-50px;
}
#navbar {
    width:100%;
    height:40px;
    background-color:#3498db;
}
#container {
    margin-right:15%;
    margin-left:15%;
    vertical-align: middle;
}

Я бы хотел, чтобы текст "Главная" был сосредоточен в <ul> который был высотой 40 пикселей. Я попытался оглядеться, чтобы ответить, но я ничего не пытаюсь работать. Я пытаюсь создать навигационную панель для своего сайта.

ElementsBro 29 нояб. 2013, в 17:45

Источник

1

li, li > p { line-height: 40px; }
Abhitalks 29 нояб. 2013, в 16:30
0

Возможный дубликат Как вертикально выровнять элементы <li> в <ul>?
C Travel 29 нояб. 2013, в 16:42

Теги:

html

css

navbar

3 ответа

0

Если у вас есть только одна строка, используйте line-height: 40px и удалите margin на <p>:

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li {
    float:left;
    line-height: 40px;
    margin: 0 5px;
}
.navtext {
    color:#FFFFFF;
    margin: 0;
    padding-bottom:-50px;
}
#navbar {
    width:100%;
    height:40px;
    background-color:#3498db;
}
#container {
    margin-right:15%;
    margin-left:15%;
    vertical-align: middle;
}

<div id="navbar">
 <div id="container">
  <ul style="height:40px">
    <li><p class="navtext">Home</p></li>
    <li><p class="navtext">Link</p></li>
    <li><p class="navtext">Contact</p></li>
  </ul>
 </div>
</div>

zessx 29 нояб. 2013, в 15:17

0

Пытаться:

li {
    float:left;
    height:100%;
    display:table;
}
#navtext {
    color:#FFFFFF;
    padding-bottom:-50px;    
    display:table-cell;
    vertical-align:middle;
}

Заклинай здесь.

Hiral 29 нояб. 2013, в 14:25