En este artículo, discutiremos la alineación vertical de las imágenes en una sola división que se extiende verticalmente en toda la página web. La alineación vertical de imágenes se refiere a colocar las imágenes en una columna. A menudo necesitamos alinear la imagen verticalmente para mostrarla correctamente en la versión móvil o, a veces, no queremos insertar una barra de desplazamiento horizontal. Usaremos la propiedad flex de CSS para este propósito.
Acercarse:
- Cree una etiqueta div para colocar las imágenes.
- En la etiqueta <img>, proporciona la ruta de las imágenes usando el atributo s rc y un texto alternativo usando el atributo alt .
- Agregue propiedades CSS para mostrar las imágenes en una alineación vertical.
Ejemplo 1: En este ejemplo, hemos utilizado el texto que ilustra la alineación vertical de la imagen junto con el texto. Para ello, hemos utilizado la propiedad CSS vertical-align para alinearlo verticalmente.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vertical images layout</title>
<style>
body {
background: rgb(225, 227, 222);
}
.container {
border: 1px solid black;
height: 205px;
width: 590px;
padding: 5px;
margin-top: 180px;
margin-left: 350px;
border-radius: 5px;
}
.container img {
width: 200px;
height: 200px;
padding: 3px;
border-radius: 7px;
}
span {
padding: 1px;
font-size: 60px;
color: green;
vertical-align: 128%;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="image-2"/>
<span>GeeksforGeeks</span>
</div>
</body>
</html>
Salida: desde la salida, podemos ver que la imagen que está alineada verticalmente con el texto.
Para alinear la serie de imágenes verticalmente, utilizaremos la propiedad de visualización de CSS combinada con la propiedad de alineación de elementos y dirección flexible . Necesitamos crear un elemento padre. Después de declarar el elemento principal como flexbox usando display: flex;, podemos alinear los elementos al centro usando align-items: center; junto con establecer la dirección de la columna como vertical usando flex-direction: column;.
Sintaxis:
.class_name {
display: flex;
flex-direction: column;
align-items: center;
}
Declararemos las propiedades CSS en la etiqueta de estilo para cambiar el diseño.
- display: flex : la propiedad flex en CSS se usa para establecer la longitud de los elementos flexibles y expande o reduce los elementos para llenar espacio adicional o para evitar el desbordamiento, respectivamente.
- flex-direction : column – Esta propiedad se utiliza para alinear los elementos de la clase en la que se aplica de forma vertical.
- align-items : center – Esta propiedad se utiliza para mostrar los elementos en el centro de la pantalla.
Ejemplo 2: En este ejemplo, mostraremos las imágenes verticalmente utilizando el enfoque anterior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vertical images layout</title>
<style>
body {
background: rgb(225, 227, 222);
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.container img {
width: 200px;
height: 200px;
padding: 3px;
margin-left: 3px;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="image-1"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="image-2"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="image-3"/>
</div>
</body>
</html>
Salida: Aquí, podemos ver que las 3 imágenes están alineadas verticalmente.
Nota : si no necesitamos definir el tamaño de las imágenes explícitamente, las imágenes cubrirán toda la página web. El tamaño de las imágenes puede variar según el requisito.
Navegadores compatibles:
- Google Chrome 29.0
- Firefox 28.0
- Borde de Microsoft 11.0
- Safari 9.0
- Ópera 17.0
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA