jquery - How to layout images in a grid? -

i have 3 rows of images. each image made of:

<span class="tribeimg"> <img src="images/tribes/img.jpg"> <p class="lt-tribe-name">tribe name</p> </span> 

with css..

.tribeimg { background-color: black; display: inline-block; position: relative; width: 140px; height: 140px; }  .tribeimg img { opacity: 0.7; position: absolute; left: 0; top: 0; }  .tribeimg img:hover, .tribeimg p:hover { cursor: pointer; }  .tribeimg .lt-tribe-name { opacity: 0.7; z-index: 11; color: white; position: absolute; left: 32px; bottom: 50px; text-shadow: 1px 1px 8px black; } 

you can see layout here: http://128.199.58.229/landingpage/

the images aligning correctly until tried add text on image. broke layout.

how fix it? or there better way lay them out? in second row have exception of div block no image.. it's not straight forward image grid exactly.

thanks.

add vertical-align: top .lt-block-tagline.

.lt-block-tagline {     background-color: #0590a0;     width: 420px;     height: 140px;     display: inline-block;     color: #fff;     font-size: 30px;     padding: 18px;     font-family: "lato";     line-height: 32px;     vertical-align: top; } 

---

to remove spacing between rows add height: 140px .lt-tribe-img-row.

.lt-tribe-img-row {     white-space: nowrap;     overflow: hidden;     height: 140px; }