Vertical alignment of Pictures in Div

Question

As you can see from the above picture, how can I vertically align them to the middle of the grey box, where they have equal height of top and bottom.

Code:

<div style="height: 290px; width: 210px; background-color: grey;">
    <img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
    <img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
</div>

I tried with the above style, but it seems to only adjust the top of the picture. I can't get it to align to the middle. Any help would be much appreciated. Thanks

Easiest way is probably with flexbox: http://stackoverflow.com/a/22218694/703717 — Danield, Jan 01 '17 at 08:25

score 1 · Answer 1 · answered Jan 01 '17 at 08:34

Since the images are inline elements by default, use the methods that apply to vertically center text with CSS will work for this case.

For example, use line-height will work like this:

<div style="height: 290px; width: 210px; background-color: grey; line-height:250px;">
    <img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
    <img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
</div>

Use flex box will also works fine. If you are willing to set the img to a block element, then you can use some other tricks like transform or negative margin.

For example:

<div style="height: 290px; width: 210px; background-color: grey; position: relative;">
    <img src="${ImagePopulator}${MainProductImage}"style="display: block; margin-top:-145px;top 50%; position:relative; height: 100%; padding: 20px 0;"/>
    <img src="${ImagePopulator}${MainProductImage}"style="display: block; margin-top:-145px;top 50%; position:relative; height:100%; padding: 20px 0;"/>
</div>

mattdevio · Answer 2 · 2017-01-01T08:32:19.977

0

Add these css to the element you want to align in the center.

position: relative;
top: 50%;
transform: translateY(-50%);

Look at this fiddle

edited Jan 01 '17 at 08:32

answered Jan 01 '17 at 08:25

mattdevio

2,319
1
14
28

score 0 · Answer 3 · answered Jan 01 '17 at 08:28

0

You can try this css -

display: flex; or, -webkit-flex
justify-content: center;
align-items: center;
flex-direction: column; or, row

answered Jan 01 '17 at 08:28

s.k.paul

7,099
28
93
168

Alon Adler · Answer 4 · 2017-01-01T08:53:26.267

0

Use the following styling, added to your code:

<div style="height: 290px; width: 210px; background-color: grey; display:table-cell; vertical-align:middle; text-align:center">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTKfww8iUXidrKRO9vnHq3rWTJdcXK8YCIhSPTMxrQ9yD1EdlnX" style="padding: 20px 0;"/>
</div>

Here is a working example with the above code.

Which produce the following:

edited Jan 01 '17 at 08:53

answered Jan 01 '17 at 08:30

Alon Adler

3,984
4
32
44

Sumon Sarker · Answer 5 · 2017-01-01T09:38:41.667

0

You can try like this

.block{
  display: table-cell;
  vertical-align: middle;
  height: 120px;
  background: rgba(0,0,0,.3);
}
img{
  height: 30px;
}

 <div class="block">
  <img src="https://raw.githubusercontent.com/ModernPGP/icons/master/keys/icon-fingerprint.png">
 </div>

When you use display: table-cell then you are able to use vertical-align CSS property

edited Jan 01 '17 at 09:38

answered Jan 01 '17 at 08:35

Sumon Sarker

2,707
1
23
36

Vertical alignment of Pictures in Div

5 Answers5