Put Multiple DIVs Side-by-Side and Vertical Align Middle

Question

We are trying to place multiple DIVs side by side. Very easy, just use FLOAT or INLINE-BLOCK. The issue with both is you cannot center the data inside the DIV vertically. Any help would be appreciated! Needs to be done without a framework.

Some have suggested this article, but this does not take in to account two or more div's next to each other. Vertical alignment of elements in a div

Option 1:

<div>
    <div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; float: left; padding: 7px; border: 1px solid #000;"><img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"></div>
    <div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; float: left; padding: 7px; border: 1px solid #000;"><img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"></div>
</div>

Option 2:

<div>
    <div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; padding: 7px; border: 1px solid #000; display: table-cell;"><img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"></div>
    <div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; padding: 7px; border: 1px solid #000; display: table-cell;"><img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"></div>
</div>

For the second option you've centered the data. What's the problem? — Tarlan Mammadzada, Oct 05 '16 at 13:27
The second option already works. I just coped to Codepen and all was fine. I'm confused about what you are asking. — R Reveley, Oct 05 '16 at 13:37
You can solve this by position and translate properties https://jsfiddle.net/1rmov8Lw/ — David Saginashvili, Oct 05 '16 at 13:37
One issue i found with that - if you have an image in the div, it sizes it down. I updated the examples above to add an image. Check your fiddle with that. thoughts? thx! — Dennis, Oct 05 '16 at 13:51

score 2 · Answer 1 · answered Oct 05 '16 at 13:25

2

If there will be only 1 line of text, you can set line-height: 150px for your <div>

Also, you can use flex in order to do it easily:

display: flex;
align-items: center;
justify-content: center;

answered Oct 05 '16 at 13:25

Marcin Dusza

412
3
10

score 2 · Accepted Answer · answered Oct 05 '16 at 13:45

2

try this one:

.file div
{width: 150px; height: 150px;  float: left; padding: 7px; border: 1px solid #000;display: flex;
align-items: center;
justify-content: center;
}

DEMO HERE

answered Oct 05 '16 at 13:45

Ivin Raj

3,448
2
28
65

This works well with and without an image in there. looks like it is css3 and widely accepted too - thanks! – Dennis Oct 05 '16 at 13:56

Put Multiple DIVs Side-by-Side and Vertical Align Middle

2 Answers2