Center elements in a div - html

Question

I'm making a website for a design class and I'm having a hard time placing things like I would want them to be.
I would like all box on the same row to be the same height, but I don't want a fixed height because the website will be responsive in the future. I would also like it if I could vertically center the content of the boxes.
Here is a screenshot of what it should look like:
And this is what it actually look like:
I tried many things but I can't think of a nice way to do that.
Here is a link to my current code: http://cgagnier.ca/gived/design/
Thank you very much

Answer 1

For equal heights columns you can also take a look here (use of pseudo elements):
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Or another way is to explore the display:table rule, so you could define boxes as table-cells. This would then probably address also the vertical align problem (just using the vertical-align property on table-cell elements).
--
For the vertical aligning itself, I sometimes take advantage of the inline-block vertical-align property.
So, define every inner block as inline-block and with vertical-align:middle (so they align with each other). Then use a pseudo ghost element with height:100% to align the others with it.
I've also got a sass mixin for that:
//to be placed on a pseudo :after/before
#mixin vertical_pivot{
content:"";
width: 1px;
height: 100%;
display:inline-block;
vertical-align: middle;
}
this last technique is also explained here (see the ghost element part by Michał Czernow):
http://css-tricks.com/centering-in-the-unknown/

Answer 2

This will solve your issue:
#premium figure {min-height: 203px;}
It is mobile responsive.
Another solution will be to use a <table> layout, but in my opinion, stick to the solution above.

Answer 3

You just need to specify a max-height for those images like so
#premium figure img {
max-width: 45%;
display: inline-block;
max-height: 149px;
min-height: 149px;
}

Answer 4

Put an div arround those div's give it a class, like container, and give it a min-height and max-height.
div:
<div class='container'>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
css:
.container{
min-height: 200px;
max-height: 200px;
}

Answer 5

Wrap your two figures in flex box div
<div style="
display: flex;
"><figure class="grille_6">
<img alt="DLC" src="img/p_dlc.png">
<figcaption>
<h1>Tous les DLC gratuits</h1>
<p>Obtenez gratuitement tous les DLC de Bugfield. Vous pourrez profiter de tous ces nouveaux bug une semaine en avance!</p>
</figcaption>
</figure>
<figure class="grille_6">
<img alt="Mallette" src="img/p_mallette.png">
<figcaption>
<h1>Participation au banquier™</h1>
<p>Lorsque vous achetez le Premium™, vous êtes automatiquement inscrit pour faire partie des spectateur du Banquier™</p>
</figcaption>
</figure>
</div>
<div style="
display: flex;
">
<figure class="grille_6">
<img alt="Couteau" src="img/p_couteau.png">
<figcaption>
<h1>Nouvelles armes exclusives</h1>
<p>Obtenez des nouvelles armes exclusives tel que le couteau bipod qui comprend une lampe tactique et une mire optique x10</p>
</figcaption>
</figure>
<figure class="grille_6">
<img alt="Priorité réduite" src="img/p_serveur.png">
<figcaption>
<h1>Priorité en file réduite</h1>
<p>Lorsque vous rejoindrez un serveur, vous serez placé dans une file spéciale à priorité réduite. Tous les autres joueurs passeront avant vous.</p>
</figcaption>
</figure>
</div>

Answer 6

You can also create a container and use the 2 columns as table cells. This is a really primitive demonstration, but I hope you've got the point. Fiddle
CSS:
#container {
display: table;
}
#content {
display: table-cell;
vertical-align: top;
background: #000;
color: #fff;
padding: 0 10px;
}
#sidebar {
display: table-cell;
vertical-align: top;
background: #cecece;
padding-right: 10px;
}
HTML
<div id="container">
<div id="sidebar">
<p>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br></p>
</div>
<div id="content">
<p>Main content</p>
</div>
</div>