- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вертикальное выравнивание: vertical-align</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Составляющие адаптивного дизайна</h1>
<p>При технической реализации адаптивного дизайна (верстке адаптивного макета), применяются следующие подходы и технологии:</p>
<ul>
<li>Резиновая верстка <small class="top">fluid layout</small></li>
<li>Медиазапросы <small class="middle">media queries</small></li>
<li>Резиновые картинки <small class="bottom">fluid images</small></li>
</ul>
</body>
</html>
CSS
h1 {
font-size: 36px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 28px;
}
li {
margin-bottom: 5px;
white-space: nowrap;
background-color: #f5f5f5;
}
small {
font-size: 8px;
color: #666666;
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
Проверьте, как вертикальное выравнивание влияет на отображение текста.
- Тегу с классом
topзадайтеvertical-align: top;. - Тегу с классом
middleзадайтеvertical-align: middle;. - Тегу с классом
bottomзадайтеvertical-align: bottom;.