Introducción: a menudo agregamos imágenes a nuestro sitio web y hay momentos en que ese texto debe alinearse verticalmente junto a una imagen. Por ejemplo, en el caso de una imagen de perfil del usuario, el nombre del usuario debe ser visible justo después de su imagen de perfil y debe estar alineado verticalmente. En este artículo, veremos cómo alinear texto junto a una imagen utilizando varios métodos.
Enfoques: hay dos métodos disponibles para alinear verticalmente el texto junto a una imagen, como se indica a continuación:
- Usando caja flexible
- Usando la propiedad CSS de alineación vertical
Usando flexbox : en este enfoque, usaremos flexbox. Para esto, usaremos la propiedad de visualización de CSS combinada con la propiedad de elementos de alineación . Necesitamos crear un elemento padre que contenga tanto imagen como texto. Después de declarar el elemento padre como flexbox usando display: flex; podemos alinear los elementos al centro usando align-items: center; .
Sintaxis:
.class_name {
display: flex;
align-items:center;
}
Ejemplo: este ejemplo usa flexbox para alinear verticalmente el texto junto a una imagen usando CSS.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to Vertically Align Text
Next to an Image using CSS ?
</title>
<style>
.aligned {
display: flex;
align-items: center;
}
span {
padding: 10px;
}
</style>
</head>
<body>
<div class="aligned">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
width="50" alt="">
<span>GeeksforGeeks</span>
</div>
</body>
</html>
Producción:
Uso de la propiedad CSS de alineación vertical : en este enfoque, no necesitamos envolver nuestro elemento en un elemento principal y usar la propiedad de alineación vertical para alinear los elementos verticalmente directamente. Sintaxis:
.class_name { vertical-align: middle; }
Ejemplo: este ejemplo usa la propiedad de alineación vertical para alinear verticalmente el texto junto a una imagen usando CSS.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to Vertically Align Text
Next to an Image using CSS ?
</title>
<style>
img {
vertical-align: middle;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
width="50" alt="">
<span>
GeeksforGeeks (using vertical-align)
</span>
</body>
</html>
Producción:
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .