Alinear dos filas de divs con CSS

Weahl #1 Feb '13

¿Por qué no se me alinean todos los text-box (cuadros rojos) a la parte superior?

CSS

.hero-item1, .hero-item2 {
    background-color: #553377;
    border: 2px solid black;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.4);
    height: 200px;
    margin: 10px auto 20px;
    text-align: left;
    width: 80%;
}
.item-box {
    border: 1px solid red;
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    width: 67px;
}
.item-img {
    display: inline-block;
    height: 40px;
    margin: auto;
    width: 40px;
}
.item-name {
    display: block;
    font-size: 12px;
    height: 50px;
}

HTML

<div class="hero-item1">
 <div class="item-row">
  <div class="item-box">
   <img src="img/items/Zhonyas-Hourglass.gif" class="item-img">
   <span class="item-name">Zhonya's Hourglass</span>
  </div>
 </div>
</div>

En cada item-row hay 10 item-box, y en cada item-box una imagen y un span.

Ya no sé que más probar, solo se que cuando al item-box le pongo un ancho de 200 todos están perfectamente alineados.

Gracias

#2 EDIT: Vale, justo al postear me ha venido la inspiración divina. He usado float: left, en los item-box y listo.
Gracias también por el consejo de las label

Merkury #2 Feb '13

#1 Podrías ponerlo en una web accesible, para poder mirarlo en linea y verlo mejor?

Pero tiene pinta que algun margin o height te lo esta descuadrando

De todas formas en vez de <span> para los nombres usa label, <span> es para alinear cosas.

1 respuesta

Esmoris #3 Feb '13 :psyduck:

#1 .item-name {
display: block;
font-size: 12px;
height: 50px;
}

Creo que está aquí el fallo , si t fijas cuando tiens 2 líneas de nombre del item se te mueve la imagen, intenta poner este display en inline-block también. Es cuestión de ir probando , pero creo que está ahí el fallo.

1 respuesta

Weahl #4 Feb '13

#3 Probé eso y tampoco funcionó, y me extrañó bastante :S. Pero vamos ya lo conseguí hacer con un float:left como edité en #1

1 respuesta

Esmoris #5 Feb '13 :psyduck:

#4

Yo siempre me rallaba mucho con los css, y cuando me pasaba algo así apuntaba en algún lado como lo había solucionado porque seguro que me volvería pasar ^^

1 respuesta

Weahl #6 Feb '13

#5 Pues tendré que hacer algo parecido, porque siempre me acabo atascando con el puto posicionamiento jaja

alterego #7 Feb '13

Prueba con vertical-align: top;

.item-box {
    border: 1px solid red;
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
    text-align: center;
    width: 67px;
}

Al hacer inline-block se alinean a partir del texto -> http://jsfiddle.net/XZHFr/
Al añadir vertical-align: top sudan del texto -> http://jsfiddle.net/XZHFr/1/

1 respuesta

eXtreM3 #8 Feb '13

.item-box { position: relative; float: left; }

gg :si:

1 respuesta

Weahl #9 Feb '13

#7 Vaya no sabía que funcionaran así internamente, me ha funcionado perfectamente, gracias ^^

#8 Así lo acabé haciendo pero sin el position relative, con un display: inline-block y perfecto

Alinear dos filas de divs con CSS

Usuarios habituales

Tags