Vertically center two divs

Question

I am trying to vertically center the content of two divs (image-container & text-container) that I am aligning side-by-side one another using flex. The div on the left contains a fixed image, the contents of the div on the right is variable - it may contain a single div or many divs.

Here is the html:

.alert-container {
  display: flex;
  justify-content: start;
  min-width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0 0 0 5px;
  border: 1px solid rgb(243, 165, 70);
  border-radius: 5px;
  background-color: #FEE1BD;
}

.image-container {
  /* this seems to work */
  display: flex;
  align-items: center;
}

.text-container {
  /* I cannot figure out what to do here to vertically center the contents.
   Also, the child divs inside this container need to each be on their own 
   row. */
}

img {
  max-height: 70px;
}

<!-- This version only a few div children inside text-container
     Note that the image is centered vertically
     But the text isn't -->
<div class="alert-container">
  <div class="image-container">
    <img src="http://2.bp.blogspot.com/-pfDiDXn-GKA/TaN3OtJC2YI/AAAAAAAAEE8/mrp-RKgEWgw/s1600/ExclamationPoint-main_Full.jpg" />
  </div>
  <div class="text-container">
    <div>
      <div>The content inside the</div>
      <div>parent div is variable</div>
      <div>there may be 1, 2, 3, or more divs</div>
    </div>
  </div>
</div>

<!-- This version has many div children inside text-container
     Note that the image is centered vertically
     But the text isn't -->
<div class="alert-container">
  <div class="image-container">
    <img src="http://2.bp.blogspot.com/-pfDiDXn-GKA/TaN3OtJC2YI/AAAAAAAAEE8/mrp-RKgEWgw/s1600/ExclamationPoint-main_Full.jpg" />
  </div>
  <div class="text-container">
    <div>
      <div>The content inside the</div>
      <div>parent div is variable</div>
      <div>there may be 1, 2, 3, or more divs</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
    </div>
  </div>
</div>

can you design your page and show in a picture what you expect as result? I did't get what you want — Otávio Barreto, Aug 26 '19 at 18:33
"vertically center the content of two divs that I am aligning side-by-side" @CalvinNunes it seems clear. — BugsArePeopleToo, Aug 26 '19 at 18:43
align-items is to be set on alert-container . not image-container **your code , before you started editing worked** only `` needed to be fixed : `` — G-Cyrillus, Aug 26 '19 at 19:31
Okay, I edited the question to explain what I am trying to do better. There is an exclamation mark image on the right and a list of divs on the right. I want both to vertically centered. — Bill Haack, Aug 26 '19 at 19:35
I still stand by my answer, I think it'll get you want you're after. — Jay, Aug 26 '19 at 19:36
from your first code it was simple : https://codepen.io/gc-nomade/pen/ExYWzKV — G-Cyrillus, Aug 26 '19 at 19:39
`align-items` controls up and down placement, `justify-content` controls left and right — Jay, Aug 26 '19 at 19:40
Here @BillHaack, one of the best references for how to use flexbox I've come across, for reference. https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties — Jay, Aug 26 '19 at 19:49

score 1 · Accepted Answer · answered Aug 26 '19 at 19:42

alignement is to be made from the parent, else use margin or align-self.

.alert-container {
  display: flex;
  justify-content: start;
  min-width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0 0 0 5px;
  border: 1px solid rgb(243, 165, 70);
  border-radius: 5px;
  background-color: #FEE1BD;
  align-items: center;
}


/* flex children 


.image-container {
}

.text-container {

}
*/

img {
  max-height: 70px;
}

i.fa {
  font-size: 70px;
  color: tomato;
  padding: 0.2em
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="alert-container">
  <div class="image-container">
    <img src="http://2.bp.blogspot.com/-pfDiDXn-GKA/TaN3OtJC2YI/AAAAAAAAEE8/mrp-RKgEWgw/s1600/ExclamationPoint-main_Full.jpg" />
  </div>
  <div class="text-container">
    <div>
      <div>The content inside the</div>
      <div>parent div is variable</div>
      <div>there may be 1, 2, 3, or more divs</div>
    </div>
  </div>
</div>

<div class="alert-container">
  <div class="image-container">

    <i class="fa fa-exclamation-circle"></i>
  </div>
  <div class="text-container">
    <div>
      <div>The content inside the</div>
      <div>parent div is variable</div>
      <div>there may be 1, 2, 3, or more divs</div>
      <div>...</div>
      <div>...</div>
      <div>...s</div>
      <div>...</div>
      <div>...</div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Aug 26 '19 at 18:37

Flexbox layout requires configuring the container relative to its immediate children. A good resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.alert-container {
  display: flex; /* this makes the container a flexbox container */
  justify-content: center; /* horizontal centering */
  align-items: center; /* vertical centering */
}

From here you can add whatever padding or other spacing styles you need.

.alert-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="container" class="alert-container">
  <div class="image-container">
    <img src="https://picsum.photos/120" />
  </div>
  <div class="text-container">
    <div>
      <div>The content inside the</div>
      <div>parent div is variable</div>
      <div>there may be 1, 2, 3, or more divs</div>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Aug 26 '19 at 18:39

0

I would set flex-direction:row; on .alert-container so the two divs it contains will be side-by-side. Then make sure both .image-container and .text-container also have display:flex;, justify-content:center; and align-items:center;

answered Aug 26 '19 at 18:39

Jay

258
2
6
16

Applying centering to the two divs individually does not center them relative to eachother. The centering rules need to be on the flex parent container. – BugsArePeopleToo Aug 26 '19 at 18:41

Adeyemi Olusegun · Answer 4 · 2019-08-27T03:29:13.743

<div id="container" class="alert-container flex1">
  <div class="image-container">
    <i class="fas fa-exclamation-circle" />
  </div>
  <div class="text-container">
    <div class = "flex2">
      <div class="box">The content inside the</div>
      <div class="box">parent div is variable</div>
      <div class="box">there may be 1, 2, 3, or more divs</div>
    </div>
  </div>

<style>
  .flex1 .flex2{
    display:flex;
  }

  .box {
    padding:5px;
  }
</style>

I added a class flex1 to the over dive you have the id container on. This gives the divs with classes image-container and text-container equal everything by default and that is enough. To be clear, i repeated the flex with the 3 div inside the text-container i added the flex2 class and you can see them on a straight line. i added the class box just to add some margin.

To push the flex2 class, (this can be applied to flex1 class too),vertically, just change the direction of the flex. add a flex-direction property to the css and give it a value of column. It aligns vertically automatically.

score -1 · Answer 5 · answered Aug 26 '19 at 18:35

If I understand your question I think it this what you need:

<div id="container" class="alert-container">
  <div class="image-container">
    <i class="fas fa-exclamation-circle" />
  </div>
  <div class="text-container">
    <div>
      <div>The content inside the</div>
      <div style="padding-top: 30px; padding-bottom: 30px;">parent div is variable</div>
      <div>there may be 1, 2, 3, or more divs</div>
    </div>
  </div>
</div>

Vertically center two divs

5 Answers5