Observaciones (Receta de cocción)
- Programas necesarios (Ingredientes):
1 Sublime Text 3.
- Nivel de dificultad: Bajo.
- Tiempo de realización (tiempo de cocción): 15-20 min.
Centrar en el eje horizontal un contenedor con anchura variable (porcentaje, %) y con tres imágenes dentro:
Hay que poner el contenedor con la anchura (width) en porcentajes (%). Esto ayuda cuando la ventana se redimensiona.
1º paso. En html, se crea un <div> que podemos nombrar con una clase .contenedor: este div, tendrá una anchura determinada en porcentaje, a sin, se guiará por lo que mida la ventana.Dentro se mete las imágenes con la etiqueta <img>.
|
1 |
.contenedor2{ width: 44%; } |
|
1 2 3 4 5 6 7 8 9 |
<div class="contenedor2"> <img src="#" class="img1" alt="Imagen1"> <img src="#" class="img2" alt="Imagen2"> <img src=" #" class="img3" alt="Imagen3"> </div> |
2º paso. En css, añadimos estilo al div con clase contenedor y lo centramos en el eje horizontal:
|
1 |
.contenedor {margin: auto;} |
3º paso. Para ponerle un color de fondo, se usa la propiedad (background):
|
1 |
.contenedor2{ background: yellowgreen;} |
4ºpaso. Alineamos las imágenes dentro de del contenedor:
|
1 |
.contenedor2{ text-align: center;} |
*cuando los elementos son en línea (inline) lo centramos con { text-align: center;} y cuando son elementos bloques, hay que cambiarlo a elemento línea con la regla {display:inline;} para poder centrarlo con la misma regla que los elementos líneas.
5º paso. Ahora metemos estilo a las imágenes, le ponemos un ancho máximo (max-width), con la unidad de medida en píxeles (px):
|
1 |
.contenedor2 img{max-width: 150px;} |
6º paso. También, un ancho (width) con medida en porcentaje:
|
1 |
.contenedor2 img{width: 100%;} |
7º paso. Si necesitas poner márgenes (margin),la unidad de medida sería en porcentaje, tendrías que restar el margen de los dos lados del la imagen al ancho (width) :
|
1 |
.contenedor2 img{width: 90% ; margin: 5%;} |
