CSS вертикальное выравнивание Bottom for Text
Я немного пробую себя на макете сайта. Итак, я начал разрабатывать страницу.
Я хочу, чтобы моя стартовая страница была разделена горизонтальной линией разделения. Все идет нормально. Теперь каждому из двух полей нужен текст, и я хочу, чтобы текст имел vertical align: bottom,
Мои исследования в интернете дали мне результат, что реальной возможности сделать это для <div> теги. Но есть один для таблицы клеток.
Мой HTML-код выглядит так:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<link href="firstPage.css" rel="stylesheet" type="text/css">
</head>
<section class="half">
<div class="titletext">
TEXT
<br>
TEXT
</div>
</section>
<section class="half">
<div class="titletext">
TEXT
<br>
TEXT
</div>
</section>
<body>
</body>
</html>
и мой класс CSS выглядит так:
@charset "UTF-8";
* {
margin: 0; padding: 0;
}
html, body, #container {
height: 100%;
font-family: 'corbertregular', arial, sans-serif;
font-size:24px;
}
header {
height: 50px;
background: gray;
}
main {
height: calc(100% - 50px);
background: green;
}
.half {
height: 50%;
position: relative;
}
.half:first-child {
background: #F3A008;
}
.half:last-child {
background: #950049;
}
.titletext{
text-align:center;
display: table-cell;
vertical-align: bottom;
}
Я нашел этот сайт как полезное решение, но он не работает для меня....
http://phrogz.net/css/vertical-align/
Что я делаю по ошибке?
1 ответ
Измените этот класс в вашем CSS:
.titletext{
text-align: center;
display: table-cell;
position: absolute;
bottom: 0;
}