Alignment of Content Vertically in Adjacent Flexbox Containers

Alignment of content vertically in adjacent flexbox containers

TL;DR

Alignment of flexbox items in adjacent flexboxes is not possible in CSS. You really need sub-grids to solve this problem with dynamic sizes of the sections in your card.

---

Flexbox Scenario

Anyway given that you have a min-height for the partner-image-container, so I guess you can have either a min-height set for the a or an ellipsis to keep it to a single line. See below solution that adds an ellipsis:

.partner-cards * {  box-sizing: border-box;}
.partner-cards {  display: flex;  flex-wrap: wrap;}
.partner-card {  display: flex;  flex: 1 0 20%;  border-radius: 0;  text-align: center;  border: 3px solid blue;  padding: 5px;/*3rem;*/  margin-bottom: 3rem;  max-width: 20%;  margin: 5px;}
.partner-card-content {  display: flex;  flex-direction: column;  min-width: 0; /* ADDED */}

/*.card-content .image-container img {    margin: 0;  padding: 0;}*/
.partner-card-content .partner-image-container {  border: 1px solid green;  padding: 0;  margin: 0;  min-height: 11rem;  display: flex;  vertical-align: middle;  align-items: center;  justify-content: center;  max-width: 100%;}
.partner-card-content p/*, .card-content .image-container*/ {  flex: 1 0 auto;  border: 1px solid red;}
.partner-card-content img.third-image {  height: 5.5rem !important;}

/*p {  font-size: 16px;line-height: 26px;font-family: Averta-Regular,Arial,Helvetica,sans-serif;margin-bottom: 2.5rem;margin-top: 0;}*/
.primary-button { /* ADDED */  text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;}

<div class="partner-cards">
  <div class="partner-card">    <div class="partner-card-content">      <div class="partner-image-container">        <img src="https://via.placeholder.com/100x40" alt="Sample Image">      </div>      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>    </div>  </div>
  <div class="partner-card">    <div class="partner-card-content">      <div class="partner-image-container">        <img src="https://via.placeholder.com/50x150" alt="Sample Image">      </div>      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been        the industry's standard dummy text ever since the 1500s.</p>      <a class="primary-button" href="#">View YYY Offer</a>    </div>  </div>
  <div class="partner-card">    <div class="partner-card-content">      <div class="partner-image-container">        <img src="https://via.placeholder.com/120x100" class="third-image" alt="Sample Image">      </div>      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>      <a class="primary-button" href="#">View ZZZ Offer</a>    </div>  </div>
  <div class="partner-card">    <div class="partner-card-content">      <div class="partner-image-container">        <img src="https://via.placeholder.com/50x100" alt="Sample Image">      </div>      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>      <a class="primary-button" href="#">View ABC Offer</a>    </div>  </div></div>

Flexbox: vertically centering text in its box

Add this to your CSS code:

.series-switcher {
 display: flex;
}

Or in your case add display: flex; to your .flextabs a.series-switcher class in CSS will work too.

/* basic setup to simulate my environment */#sidebar { width: 320px; padding: 0 30px; background-color: #eaeaea; }.widget { clear:both; padding: 10px 0; }ul { list-style: none; margin: 0; padding: 0;}a { text-decoration: none; color: #666; }a:hover { color: #000; }
/* list method */#series-switcher-ul li {  display: inline-block;  margin: 0;  padding: 0;  vertical-align: middle; /* nope */}li a.series-switcher {  display: block;  background-color: #ccc;  border: 1px solid #999;  border-radius: 8px 8px 0 0;  padding: 0 15px;  line-height: 0.8em;  text-align: center;  height: 2.5em;  vertical-align: middle; /* nope */}li a.series-switcher.active {  background-color: unset;  color: #000;  border-bottom-width: 0;  }
/* flexbox method */.flextabs {  display: flex;  width: 100%;  flex-wrap: wrap;  align-items: center; /* nope */  justify-content: center; /* nope */  align-content: center; /* nope */  vertical-align: middle; /* nope */}.flextabs a.series-switcher {  flex: auto;  background-color: #ccc;  border: 1px solid #999;  border-radius: 8px 8px 0 0;  height: 2.5em;  padding: 0 15px;  line-height: 0.8em;  text-align: center;  align-items: center; /* nope */  justify-content: center; /* nope */  align-content: center; /* nope */  vertical-align: middle; /* nope */}.flextabs a.series-switcher.active {  background-color: unset;  color: #000;  border-bottom-width: 0;}
.series-switcher { display: flex;}

<div id="sidebar">  <div class="widget">    <ul id="series-switcher-ul">     <li><a href="#" class="series-switcher series-nt active">New<br>Testament</a></li><li><a href="#" class="series-switcher series-ot">Old<br>Testament</a></li><li><a href="#" class="series-switcher series-topics">Topics</a></li>    </ul>  </div>
  <div class="widget">    <div class="flextabs">     <a href="#" class="series-switcher series-nt active">New<br>Testament</a>      <a href="#" class="series-switcher series-ot">Old<br>Testament</a>     <a href="#" class="series-switcher series-topics">Topics</a>    </div>  </div></div>

How can I vertically center flexbox with two rows?

I hope I understood your question correctly...

To center your contents vertically, you need a wrapper element that has the full height of the window. So in my example below there's a "wrapper" element with 100% height which has display: flex, flex-direction: column; and justify-content: center in order to center it's contents vertically.

Also, for the height: 100% to be effective, you also need to apply that to all parent elements, in this case html and body:

html,
body {
  height: 100%;
}

.wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.col {
  flex-basis: 50%;
}

<div class="wrap">
  <div class="row">
    <div class="col">Header1</div>
    <div class="col">Header2</div>
  </div>
  <div class="row">
    <div class="col"><button>Click here</button></div>
    <div class="col"><button>Click here</button></div>
  </div>
</div>

Flexbox vertical text alignment

The align-items property applies only to flex containers.

You have it applied to img-wrapper:

.item,
.img-wrapper {
  align-items: center;
}

...but this element is not a flex container.

Since img-wrapper does not have display: flex or display: inline-flex applied, align-items is being ignored.

Try this:

.item,
.img-wrapper {
  align-items: center;
  display: flex;
}

.container {  display: flex;  justify-content: center;}.item {  display: flex;  flex-direction: column;  width: 300px;}.item,.img-wrapper {  align-items: center;  display: flex;}img {  max-width: 100%;}.img-wrapper {  flex-grow: 1;  flex-shrink: 0;}.excerpt-wrapper > p {  margin: 0;}

<div class="container">  <div class="item">    <div class="img-wrapper">      <img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="Sample Image">    </div>    <div class="excerpt-wrapper">      <p>ghostbusting since 1938</p>      <p>ghostbusting since 1938</p>      <p>ghostbusting since 1938</p>      <p>ghostbusting since 1938</p>      <p>ghostbusting since 1938</p>    </div>  </div>  <div class="item">    <div class="img-wrapper">      <img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="Sample Image">    </div>    <div class="excerpt-wrapper">      <p>ghostbusting since 1938</p>      <p>ghostbusting since 1938</p>    </div>  </div>

How to center items vertically and handle overflows without cutting off content

One possible solution would be to not actually use justify-content: center; on .aligned, but just to vertically center this container it self. For this you may use auto marging like this:

.container {
  background-color: aqua;
  display: flex;
  flex-direction: column;
  height: 200px;
  padding: 10px;
  width: 120px;
}

.aligned {
  background-color: yellow;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  margin: auto 0;
  overflow-y: auto;
  padding: 10px 0;
}

<div class="container">
  <div>Sider Header (potential overflow)</div>
  <div class="aligned">
    <button>Item 1</button>
    <button>Item 2</button>
    <button>Item 3</button>
    <button>Item 4</button>
    <button>Item 5</button>
    <button>Item 6</button>
    <button>Item 7</button>
    <button>Item 8</button>
    <button>Item 9</button>
    <button>Item 10</button>
    <button>Item 11</button>
    <button>Item 12</button>
  </div>
  <div>Sider Footer</div>
</div>

<div class="container">
  <div>Sider Header (less content)</div>
  <div class="aligned">
    <button>Item 1</button>
    <button>Item 2</button>
    <button>Item 3</button>
    <button>Item 4</button>
   
  </div>
  <div>Sider Footer</div>
</div>

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

---

Related Topics