2010-08-27 15 views
6

Por lo tanto, intento alinear verticalmente las imágenes dentro de un contenedor div. Intenté agregar vertical-align: medio; al div principal sin suerte.Imagen de alineación vertical dentro del div principal con css

<div class="contributor_thumbnail"><img src="image.jpg"></div> 
    <div class="contributor_thumbnail"><img src="image.jpg"></div> 

.contributor_thumbnail { 

    position: relative; 
    display: block; 
    float: left; 
    width: 150px; 
    height: 150px; 
    line-height: 100%; 
    text-align: center; 
    margin-right: 15px; 
    margin-bottom: 15px; 
    padding: 5px; 
    vertical-align: middle; 
    border: 1px solid #bbbbbb; 
    border-top: 1px solid #333; 
    border-left: 1px solid #333; 

} 

Respuesta

6

Lo que quiero hacer es establecer la imagen como imagen de fondo.

.contributor_thumbnail { 
    /* Background image instead of using and img tag */ 
    background: url(image.jpg) center center no-repeat; 
    position: relative; 
    display: block; 
    float: left; 
    width: 150px; 
    height: 150px; 
    line-height: 100%; 
    text-align: center; 
    margin-right: 15px; 
    margin-bottom: 15px; 
    padding: 5px; 
    border: 1px solid #bbbbbb; 
    border-top: 1px solid #333; 
    border-left: 1px solid #333; 

} 
+0

Gracias, esto funciona! – ThinkingInBits

1

Prueba esto:

HTML

<div class="contributor_thumbnail"> 
<div class="content"> 
    <img src="image.jpg"> 
</div> 
</div> 

CSS:

.contributor_thumbnail {float:left; height:50%; margin-bottom:-120px;} 
.content {clear:both; height:240px; position:relative;} 

Inspirado por: Lost in the Woods vertically centering with CSS.

+0

Gracias! Utilicé 'line-height: 2em;' ya que solo tenía un número al centro. – Chloe

Cuestiones relacionadas