Я знаю, что этого очень много задали, но все методы, которые я пытаюсь, по какой-то причине не работают на мой код.Вертикальный выровнять в элементах заголовка
Я хочу вертикального выравнивания текста в элементах
HTML:
<div id="mainWrapper">
<div id="header">
<div id="logo" class="headerElements">
<h:outputText class="headerText" value="RedPrice" />
</div>
<div id="login" class="headerElements">
<h:outputText class="headerText" value="Login" />
</div>
<div id="register" class="headerElements">
<h:outputText class="headerText" value="Register" />
</div>
<div id="follow" class="headerElements">
<h:outputText class="headerText" value="Follow us" />
</div>
</div>
</div>
CSS:
*{
margin:0;
padding:0;
}
body,html {
height: 100%;
font-family: 'Quicksand', sans-serif;
}
div#mainWrapper {
height: 100%;
width: 100%;
background: url(../images/women.jpg) no-repeat center center;
}
div#header {
width: 100%;
height: 5%;
background: white;
opacity: 0.5;
}
div.headerElements {
float: left;
height: 100%;
width: 10%;
text-align: center;
}
div.headerElements:hover {
background: orangered;
opacity: 0.5;
}
.headerText {
font-size: x-large;
}
То, что я уже пробовал: (безуспешно)
- установка высота линии до 100% в headerElems
- установка
display: table-cell
- положить его в
ul
иlis
и настройки дисплея: стол и дисплей: стол- ячейка
Может ли кто-нибудь предоставить мне решение?
Что это значит: h означает в коде ур? – thelolcat