Puebla en Red

Nuestro Blog

  • Home
  • Nuestro Blog
  • Crazy house
  • Picadillo de bits
  • Recién horneado
aprendizext.pueblaenred@gmail.com

Síguenos

  • Facebook
  • Twitter
  • Google+

Imágenes en una fila y centrado

portada tuto

 

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>.

CSS
1
.contenedor2{  width: 44%; }

XHTML
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:

CSS
1
 .contenedor {margin: auto;}

3º paso. Para ponerle un color de fondo, se usa la propiedad (background):

CSS
1
.contenedor2{ background: yellowgreen;}

4ºpaso. Alineamos las imágenes dentro de del contenedor:

CSS
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):

CSS
1
 .contenedor2 img{max-width: 150px;}

6º paso. También, un ancho (width) con medida en porcentaje:

CSS
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) :

CSS
1
  .contenedor2 img{width: 90% ; margin: 5%;}

 

pantallazo-tuto-imagenes-retocada

pantallazo-tuto-imagenes2-retocada

Compártelo:

  • Haz clic para compartir en Twitter (Se abre en una ventana nueva)
  • Haz clic para compartir en Facebook (Se abre en una ventana nueva)
  • Haz clic para compartir en Google+ (Se abre en una ventana nueva)
  • Haz clic para compartir en LinkedIn (Se abre en una ventana nueva)
  • Haz clic para compartir en Tumblr (Se abre en una ventana nueva)
  • Haz clic para compartir en Pinterest (Se abre en una ventana nueva)
  • Hac clic para enviar por correo electrónico a un amigo (Se abre en una ventana nueva)
  • Haz clic para compartir en WhatsApp (Se abre en una ventana nueva)

Posts Relacionados

WordPressInstalación y configuración de WordPress 5020082786_c1aa6cc68c_bPseudo-clases 2NUEVAS ETIQUETAS CON CARGA SEMÁNTICA 4Formularios HTML5: las nuevas etiquetas y atributos.
noviembre 30, 2016 BY Jose Antonio IN Picadillo de bits
jose
Written by Jose Antonio

Leave a comment Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

  • Blog (1)
  • Crazy house (1)
  • Picadillo de bits (8)
  • Recién horneado (2)

Etiquetas

atributos input Black Mirror Charlie Brooker child childild Ciencia Ficción css css3 desarrollo de página web desarrollo web font-family formularios googlefonts html html5 imagenes kongo listas pseudo-clases SEMÁNTICA Serie social Sublime Text 3 Tecnología Televisión theme themechild tipografía tipografía web tutorial twitter web fonts widget wordpress wp

Entradas Populares

portada tuto
Imágenes en una fila y centrado
  Observaciones (Receta de cocción) Programas necesarios (Ingredientes):         1 Sublime Text 3. Nivel
noviembre 30, 2016
definitiva
SUBLIME TEXT
En este post vamos a explicar sobre esta herramienta llamada Sublime Text, su instalación y
octubre 3, 2016

Autores

Azucena
Azucena (1)
Jose Antonio
Jose Antonio (2)
Juan Antonio
Juan Antonio (1)
Kongo
Kongo (3)
María
María
Miriam
Miriam
Raúl
Raúl (1)
Rosi
Rosi (1)
Sofía
Sofía (1)
Jesús
Jesús (1)

Twitter

Tweets by PueblaenRed

Facebook Page

Puebla en Red

Categorías

  • Blog
  • Crazy house
  • Picadillo de bits
  • Recién horneado

Síguenos

  • Facebook
  • Twitter
  • Google+

Contacto

aprendizext.pueblaenred@gmail.com
C/San Pedro s/n, 06490 Puebla de la Calzada
(Badajoz), Extremadura, ESPAÑA
Utilizamos cookies propias y de terceros para mejorar nuestros servicios. Si continua navegando, consideramos que acepta su uso.
loading Cancelar
La entrada no fue enviada. ¡Comprueba tus direcciones de correo electrónico!
Error en la comprobación de email. Por favor, vuelve a intentarlo
Lo sentimos, tu blog no puede compartir entradas por correo electrónico.