CODEWITHSUNDEEP
css
pufAmuf
pufAmuf

Reputation: 7805

Position multiple Divs in center

I have centered 3 divs beside each other in the center, however the one on the right seems to be vertically higher than the other 2 divs. Check it out

.x-gallery-center {
width: 100%;
text-align: center;
}

.x-gallery-container {
    display: inline-block;
    margin: 10px;
    width: 250px;
    height: 370px;
    position: relative;
}

What's the culprit?

Thanks!

Upvotes: 0

Views: 61

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

inline-block default alignment is baseline. Add vertical-align:top to your x-gallery-container class. 

.x-gallery-container {
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.1); 
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.1); 
box-shadow: 0 3px 5px rgba(0,0,0,.1);
background-color: #FFFFFF;
display: inline-block;
margin: 10px;
width: 250px;
height: 370px;
position: relative;
vertical-align:top;
}

DEMO

Upvotes: 1

ChrisGheen
ChrisGheen

Reputation: 994

If you make the text in the link in the center shorter it seems to fix the problem, make "Konferencia Rozvoj ľudských zdrojov" -> "Konferencia" and the div's will all appear side-by-side.

Upvotes: 2

Related Questions