How can I align centered inline-block elements correctly?


Tags: css,html5,position,css-float,css-position

Problem :

http://jsfiddle.net/ytn6z8oo/

To see what the problem is, please resize the result window in jsfiddle so there are three items in a row. As you can see, the third item doesn't align with the others, apparently because it has less content. How can I fix this? I tried float:left, but then they aren't centered anymore, which is essential.

HTML

<div id="red">

<figure class="red"><img src="images/redaktion_fotos/kubi.jpg" class="profil" /> <figcaption>Kubilay Yalçın</figcaption>
<p><img src="/templates/askanier/images/icons/crown.png" /> Chefredakteur</p>
<p><img src="/templates/askanier/images/icons/askanier.png" /> Allgemein</p><br>
<p><a href="https://www.facebook.com/kubyal" class="button fb" target="_blank">Kontakt</a><a href="mailto:kubilayyalcin@yahoo.de" class="button mail">Kontakt</a></p>
</figure>

<figure class="red"><img src="images/redaktion_fotos/simon.jpg" class="profil" /> <figcaption>Simon Mathewson</figcaption>
<p><img src="/templates/askanier/images/icons/cursor.png" /> Website</p>
<p><img src="/templates/askanier/images/icons/askanier.png" /> Allgemein</p>
<br>
<p><a href="https://www.facebook.com/simon.mathewson" class="button fb" target="_blank">Kontakt</a></p>
</figure>

<figure class="red"><img src="images/redaktion_fotos/sophie.jpg" class="profil" /> <figcaption>Sophie Altst&auml;dt</figcaption>
<p><img src="/templates/askanier/images/icons/sport.png" /> Sport und Fitness</p><br>
<p><a href="https://www.facebook.com/sophie.eatme" class="button fb">Kontakt</a></p>
</figure>

<figure class="red"><img src="images/redaktion_fotos/safa.jpg" class="profil" /> <figcaption>Safa Hazem</figcaption>
<p><img src="/templates/askanier/images/icons/karikatur.png" /> Karikaturistin</p><br>
<p><a href="https://www.facebook.com/safa.ha.921" class="button fb" target="_blank">Kontakt</a></p>
</figure>

<figure class="red"><img src="images/redaktion_fotos/vicky.jpg" class="profil" /> <figcaption>Vicky Mielczarek</figcaption>
<p><img src="/templates/askanier/images/icons/fashion.png" /> Mode und Lifestyle</p><br>
<p><a href="https://www.facebook.com/vicky.mk.5" class="button fb target="_blank"">Kontakt</a></p>
</figure>


</div>

CSS

#red {
  padding: 0 0 20px 0;
  text-align: center;
}

#red::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

figure.red {
  margin: 30px 15px 0 15px;
  display: inline-block;
  background-color: #ddd;
  border: 1px solid #ccc;
  padding: 10px 10px 0 10px;
  font-family: dejan;
  height: 300px;
} 

figure.red:hover {
  border: 1px solid #bbb;
}

figure.red img.profil {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  display: block;
}

figure.red figcaption {
  color: white;
  background: url(../images/figcaption.png) no-repeat;
  width: 236px;
  height: 44px;
  font-weight: bold;
  text-shadow: -1px -1px 0px rgba(0,0,0,0.5);
  padding-top: 25px;
  margin: -12px auto 0 auto;
  text-align: center;
}

figure.red p {
  margin: 0;
  text-align: center;
}

figure.red .button {
  margin-bottom: -10px;
  padding: 10px 15px 10px 40px;
  background-position: center left 15px;
}

figure.red .fb {
  background-image: url(../images/icons/fb.png);
  background-color: #3b5998;
  background-repeat: no-repeat;
}

figure.red .mail {
  background-image: url(../images/icons/mail.png);
  background-color: #666;
  background-repeat: no-repeat;
}

figure.red figcaption a.button:last-child {
  margin-left: 5px;
}


Solution :

You could use vertical-align: top; to override default vertical-align value that is baseline.

figure.red {
  vertical-align: top;
} 

Fiddle: http://jsfiddle.net/ytn6z8oo/1/


    CSS Howto..

    How do you set the background color for a variable height page?

    I want all columns() in a
    have the equal length, how to achieve this?

    how to simulate mouse hover on image in css

    How to position a vertical menu as nested
      under horizontal parent

    How to prevent css keyframe animation to run on page load?

    How to randomly pick colors and shapes from a for loop and display it in another div?

    How to vertically align absolutely positioned images on top of one another?

    How to make a full width image with fixed height in bootstrap?

    How to change table width using css

    Bootstrap: how to stack divs of different heights?

    CSS Z-Index: How to show element above parent's sibling? (and have cousin above parent)

    Jquery - How to alternate an :Odd :Even pattern every 4 ?

    How to CSS style a table such that its width is within [min, max] percent of page width and as wide as necessary?

    How to click on and off submenu's using javascript

    How to modify your CSS working with Mobile Angular UI and Bootstrap

    How to hide :before in overflow:hidden element

    Yahoo news CSS, how to achieve behavior

    Why was ::selection removed from the CSS Selectors spec, and how does its specificity work against type selectors?

    How can I apply a css transition to an element when its parent is hovered?

    How to handle multiple-language site without database or backend code?

    How do i select only one column when hovering over it in a drop down jQuery menu?

    How to completely show hide tabs on onclick event in HTML CSS Javascript

    How to specify styles for h:panelgrid in jsf

    How to get relative CSS from photoshop artboard?

    CSS Selectors - How to apply a defined class on the selector's event

    CSS: How to have only 100% with fluid layout and border?

    Issue with Hide / Show Jquery on fixed positioned div

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    How to style picture gallery to allow portait and landscape pics that are also links

    How to change the scroll-bar style in css [duplicate]