alignment of images, headings and text

Question

I'm trying to align the contents of three divs so that the start (changed because I didn't make it clear enough) of the images, headings and text line up horizontally, and the images are offset as shown. I've tried a few approaches (including setting the image wrappers to fixed sizes), but none of them seem to scale well when I change the size of the browser - usually resulting in the size of the gap between the text and image changing too much and looking odd.

Here's the design I want to line up:

What I'm trying to achieve:

The problem is that each of the sizes of the images is based on the width of its container. If I set an image-wrapper height (the blue border), in order to align the text below it, it causes problems when the browser gets smaller and/or larger. For example, this is what happens with the same fixed wrapper height at a narrower browser size:

Is there a best practice or something for this type of layout/design?

I've created a codepen to show the problem more clearly, here

.container {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  top: 15rem;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  border: 1px solid red;
}

.card-image-wrapper {
  border: 1px solid blue;
  transform: translateY(-5rem);
  /*height: 20rem; can use this to align the text, but it doesn't scale well */
}

.wrapper-1 {
  width: 50%;
}

.wrapper-2 {
  width: 25%;
}

.wrapper-3 {
  width: 38%;
}

.card-image {
  width: 100%;
}


  
    
      
    
    Heading
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque neque quisquam omnis incidunt laborum delectus deleniti, aliquid magnam, sit, autem eos perferendis saepe iure aut provident minus molestiae similique! Eveniet debitis accusamus,
      rerum illo dicta at atque quidem, ratione laboriosam doloribus, tempore optio nostrum vel sit. Fuga ipsam beatae doloremque.
  

  
    
      
    
    Heading
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta, ullam accusantium deserunt optio laborum nobis voluptates dolorem maxime ad omnis dolorum. Nisi esse maiores necessitatibus omnis voluptatem repudiandae obcaecati maxime dolores, cumque
      quod pariatur magni sunt incidunt rem voluptatum commodi laborum odio vel? Quisquam culpa a praesentium eligendi aut totam commodi ab eius quis, eos, animi, amet minus debitis unde.
  

  
    
      
    
    Heading
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id molestias distinctio recusandae impedit iste ipsum, mollitia non laudantium incidunt saepe omnis error natus exercitationem alias quas in, nobis sed aliquam minima adipisci amet magnam.
      Perferendis nostrum, dicta consequatur odit aliquid placeat sequi porro fuga enim?

Edit: Just to make it clear, I'm trying to make the headings and text line up horizontally. I'll add a second picture shortly

user_4221083 · Answer

Here you go: https://codepen.io/anon/pen/jvwVor

Position .card-image-wrapper at the top of the page, basically 0 height. Position everything else at the bottom. Then center the img within .card-image-wrapper.

 display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  min-height: 25rem;
  border: 1px solid red;
}

.card-image-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid blue;
  height: 1px;
}

.card-heading {
  margin-top: 15rem;
}

This assumes your pictures are not ridiculously tall. If you want all 3 aligned you must make sure the pictures are shorter than a certain height. Otherwise you'll have to determine the top margin via JavaScript.

user_5509310 · Answer

i think the problem is where align each element. In that case, i suppose you want align images by this own center. To achieve that first you set the 'anchor point' of the image in the middle:

.card-image-wrapper{
  border: 1px solid blue;
  transform: translateY(-50%) translateX(-50%); // <-- change
  position: absolute; // <-- new
  top: 0; // <-- new
  left: 50%; // <-- new
  width: 100px; // <-- new
  height: 100px; // <-- new
}

As you see, the image wrapper, is set to absolute position. To set the position relative to the card:

.card{
  position: relative; // <-- new
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32%;
  border: 1px solid red;
  padding-top: 100px; // <-- new
}

Also add a padding top as free space to the image, and set the image constraints

.card-image-wrapper img {
  display: block;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

And the 'cards' you has already centered

user_7396516 · Answer

I've marked theblindprophet's answer as correct as it was helpful and I am still using it in part, but at least the way I implemented it it still suffers from similar problems with spacing when resized.

The solution i've also used is a pseudo element for the background and/or border. This gives the impression that the content is offset, whilst allowing the flow of the element to remain constant when resized.

The pseudo element is absolutely positioned, with a top of 20%, and a height of 80%. This scales correctly and fits my need.

Hope this helps someone.

alignment of images, headings and text

3 Answers