How Can I Vertically Align an Image Within a Responsive Container?

Vertically Aligning an Image within a Responsive Container

The Challenge

You have an HTML structure with a container that maintains a square aspect ratio as the browser window is resized. Inside this container, you want to add an image, but need to ensure that it remains vertically aligned. The challenge arises because the images are variable in height and the height of the container cannot be fixed.

Solution

Using CSS Inline Elements

1. Create an inline-block pseudo-element as the first (or last) child of the container element and set its height to 100% to occupy the entire container height.
2. Set vertical-align: middle to both the pseudo-element and the image to vertically center the elements.
3. Remove any white space between the elements by setting font-size: 0; on the container element to remove the space occupied by the characters (spaces).

HTML:

<div class="container">
    <div>

CSS:

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

Making the Container Responsive

To create a responsive container where the height resizes relative to the width, you can use percentage values for the top/bottom padding property:

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Wrapping the Image Content

To avoid excessive space at the top or bottom of the container, wrap the image in a wrapper element and position it absolutely within the container to fill its entire space:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Including the Image and CSS for Alignment

HTML:

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>

CSS for image alignment:

.img-container {
  text-align: center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Alternative for Browser Compatibility

For better compatibility across browsers, you can use a div element as the first child of the image container instead of the pseudo-element:

HTML:

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>

CSS:

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

Using max-* Properties for Image Control

To keep the image within the container when the width is smaller, you can use max-height and max-width properties on the image:

.img-container img {
    max-height: 100%;  /* Set maximum height to 100% of its parent */
    max-width: 100%;   /* Set maximum width to 100% of its parent */
}

The above is the detailed content of How Can I Vertically Align an Image Within a Responsive Container?. For more information, please follow other related articles on the PHP Chinese website!