CSS middle image

Question

Here is my code. Please help to make it centering middle and also, all images size is not the same

CSS:

body {
   margin: 0px;
}

.wrapper {
   text-align:center;
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 21
}

.wrapper img {
   display: table-cell;
   vertical-align: middle; 
}

HTML:

<div class="wrapper">
  <img src="http://static.desktopnexus.com/thumbnails/196734-bigthumbnail.jpg" />
</div>

I'm almost positive that most elements that have `inline-block` as their default display properties (images, form fields) cannot be set to `table-cell`. — cimmanon, Dec 29 '12 at 15:35

score 0 · Answer 1 · answered Dec 29 '12 at 16:03

0

You just need to set the margin on the image.

.wrapper img {
    margin: auto;
}

This method can be used in any objects but make sure the parent has a width or height set.

answered Dec 29 '12 at 16:03

Licson

2,231
18
26

This only covers horizontal alignment, not vertical. – cimmanon Dec 29 '12 at 16:12
That's because the wrapper fits the height of the image. If that's not the case, it'll work fine. – Licson Dec 29 '12 at 16:19

CSS middle image

1 Answers1