En este artículo, aprenderemos cómo autoalinear un elemento en la línea de base del contenedor. Esto se puede lograr usando la propiedad align-self de CSS . Esta propiedad es una subparte del módulo Flexbox y ayuda a anular la alineación del elemento flexible específico, definido por el contenedor. La propiedad de línea base se puede utilizar para alinear el elemento en la línea base del contenedor. Cualquier otra alineación también puede ser posible utilizando el mismo enfoque.
Ejemplo:
HTML
<html>
<head>
<style>
#flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
height: 250px;
}
#flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div id="flex-container">
<div>A</div>
<!-- Self align the div to baseline -->
<div style="align-self: baseline">B</div>
<div>C</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA