- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Alineación vertical: vertical-align</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Componentes del diseño adaptable</h1>
<p>En la implementación técnica del diseño adaptable, al maquetar una interfaz de este tipo, se usan los siguientes enfoques y tecnologías:</p>
<ul>
<li>Maquetación fluida <small class="top">fluid layout</small></li>
<li>Media queries <small class="middle">media queries</small></li>
<li>Imágenes fluidas <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;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
Comprueba cómo la alineación vertical afecta a la visualización del texto.
- Asigna a la etiqueta con clase
topvertical-align: top;. - Asigna a la etiqueta con clase
middlevertical-align: middle;. - Asigna a la etiqueta con clase
bottomvertical-align: bottom;.