How to vertically and horizontally center two images inside a div on a responsive page


Tags: html,css,responsive-design,skeleton-css-boilerplate,normalize-css

Problem :

I'm using Skeleton and Normalize css. I want to center two images side by side vertically and horizontally inside the div container. When the page becomes narrower, I want the 2nd image at the bottom of the first image as below

Normal width: img1 img2

Narrow view: img1 img2

Here is my code:

    <div id="center">
    <div class="left"><img class="u-max-full-width" src="img1.jpg"></div>        
    <div class="right"><img class="u-max-full-width" src="img2.jpg"></div>
    </div>

And here is my css:

#center {
width: 100%;
text-align: center;
position: relative;
display: table;}
#center > div {
display: table-cell;
vertical-align: middle;}

.left {
width: 50%;
height: 100%;
text-align: center;}

.right {
width: 50%;
height: 100%;
text-align: center;}

With this code they are vertically centered in normal width but I cannot get the images aligned below each other in narrower view. Any ideas how to do this? Joe



Solution :

Try this:

.container {
  text-align: center;
  
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  
  justify-content: center;
  flex-wrap: wrap;

  -webkit-box-align: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  height: 800px;
}
<div class='container'>

   <img src="//placehold.it/300x300" class="thumbnail" alt="">
   
   <img src="//placehold.it/300x300" class="thumbnail" alt="">

</div>

Edit: Sry didn't read properly.. These don't break up if the page gets narrow.

As François pointed out, add this to the css:

flex-wrap: wrap;

Another Edit: apparently IE has some problems with this. Make a wrapper around .container (container_wrapper) or something. Give it:

display: flex;
flex-direction: column;
height: 100%;

And make sure your html and body are set to 100% height


    CSS Howto..

    How to colorize an image in CSS?

    How can I render country flags as a ribbon, using CSS only?

    how to get double border in using CSS?

    how to change triangle to up arrow using pure css

    Slide Up on Services Pages & Slider Not Working/Showing

    how to make RegEx to match CSS non greedy for a part of the match

    How to style a table cell in JavaFX2 using CSS (without removing hover/selection etc.)

    How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

    How to remove/ignore :hover css style on touch devices

    How to remove a CSS class from a Wicket component?

    How to add the img-responsive class in javascript

    How to apply css to three different classes hovering one of them

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How to add a half circle at the bottom middle of my header?

    How to change in all css “#xxx” to “#000” [closed]

    Android WebView : how do I control webView height?

    How to load and apply a CSS stylesheet at runtime in a Flex application?

    How to make circles repeat in the background of an element in full CSS?

    ASP.NET - how to use CSS to align ASP.NET controls in a data entry situtaion?

    How to access the physical Bundled and Minified js / css created by BundleConfig class

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    How to make the menu contents center aligned?

    How would you go about placing li in different divs?

    How to make diagonal titles on html tables

    how to get attribute value using selenium and css

    CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

    DropDown Menu won't show for more than a second..not working.

    How do I disable warnings from Aspx files (HTML,CSS)

    How can I get the font size of an element as it was set by css

    how to add css to selected row in treegrid GXT 3