En este artículo, aprenderemos a alinear elementos con la línea de base del contenedor. Hay tres tipos de alineaciones en CSS, alineación de línea base, alineación posicional y alineación distribuida. La alineación de la línea de base se utiliza para alinear las líneas de base de los cuadros en un grupo de temas de alineación. Se pueden usar como valores para la alineación de contenido conJustify/align-content y también para la autoalineación conJustify/align-self .
Sintaxis: hay tres palabras clave que se pueden usar para establecer la alineación de referencia de los elementos en un contenedor, como se muestra en la siguiente sintaxis.
.container {
align-items: baseline | first baseline | last baseline;
}
Los siguientes ejemplos demuestran este enfoque:
Ejemplo 1: en este ejemplo, los elementos están alineados con la línea de base del contenedor.
HTML
<html>
<head>
<style>
div {
padding: 12px;
margin: 2px;
}
/* The container element */
#container {
width: 500px;
height: 300px;
padding: 10px;
border: 2px solid black;
display: flex;
align-items: baseline;
}
/* Item elements in the container*/
#item1 {
color: bold black;
border: 5px solid red;
background-color: yellow;
}
#item2 {
color: bold red;
border: 5px solid green;
background-color: orange;
}
#item3 {
color: bold red;
border: 5px solid red;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="container">
<div id="item1">Text One</div>
<div id="item2">Text Two with
baseline alignment.</div>
<div id="item3">Text Three</div>
</div>
</body>
Producción:
Ejemplo 2: en este ejemplo, los elementos se alinean con la primera línea de base del contenedor.
HTML
<html>
<head>
<style>
div {
padding: 12px;
margin: 2px;
}
/* The container element */
#container {
width: 500px;
height: 300px;
padding: 10px;
border: 2px solid black;
display: flex;
align-items: first baseline;
}
/* Item elements in the container*/
#item1 {
color: bold black;
border: 5px solid red;
background-color: yellow;
}
#item2 {
color: bold red;
border: 5px solid green;
background-color: orange;
}
#item3 {
color: bold red;
border: 5px solid red;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="container">
<div id="item1">Text One</div>
<div id="item2">
Text Two with first
baseline alignment.
</div>
<div id="item3">Text Three</div>
</div>
</body>
Producción:
Ejemplo 3: en este ejemplo, los elementos se alinean con la última línea de base del contenedor.
HTML
<html>
<head>
<style>
div {
padding: 12px;
margin: 2px;
}
/* The container element */
#container {
width: 500px;
height: 300px;
padding: 10px;
border: 2px solid black;
display: flex;
align-items: last baseline;
}
/* Item elements in the container*/
#item1 {
color: bold black;
border: 5px solid red;
background-color: yellow;
}
#item2 {
color: bold red;
border: 5px dashed green;
background-color: orange;
}
#item3 {
color: bold red;
border: 5px solid red;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="container">
<div id="item1">Text One</div>
<div id="item2">
Text Two with last
baseline alignment.
</div>
<div id="item3">Text Three</div>
</div>
</body>
Producción:
Publicación traducida automáticamente
Artículo escrito por praveenbgp6 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA