Vertically center and wrap text around another div

Question

I'm at a loss here, I've been trying various things for a couple hours trying to get some text to center itself vertically in another div when it is only one line. When there are multiple times, it looks great and wraps beautifully.

Here is a photo of what I'm talking about: photo

How can I fix the first instance (one line only) so it is centered vertically in the box? Here's a bootply.

Thank you!

Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) — ukjnr1, Aug 10 '18 at 19:59
Please post the code you have tried so far, and read the advice on [how to write a good question on StackOverflow](http://stackoverflow.com/help/how-to-ask). The code should be posted here, rather than on external sites, so that users can help you without leaving Stack Overflow. — i alarmed alien, Aug 11 '18 at 07:13

t q · Answer 1 · 2018-08-10T19:48:03.143

1

You need css to set the parent container to display: table; then the container as display:table-cell;

.list-item-content{
height: 350px;  width: 250px; background-color:#F1F1F1;
 display: table;
}
.list-item-content .cell{
  display:table-cell; text-align: center;  vertical-align: middle;
}

<div class="list-item-content">
  <div class='cell'>
    This should be vertically centered if there is room
  </div>
</div>

edited Aug 10 '18 at 19:48

answered Aug 10 '18 at 19:37

t q

4,593
8
56
91

which "other div" is this wrapping around (as per OP)? – ashleedawg Jan 03 '23 at 13:54

score 1 · Answer 2 · answered Aug 10 '18 at 19:38

1

You need to add text-center like below

          <div class="list-item-content text-center">
            This should be vertically centered if there is room
          </div>
        </div>

I'm assuming that you are using bootstrap?

answered Aug 10 '18 at 19:38

whisk

713
1
10
34

score 1 · Answer 3 · answered Aug 10 '18 at 20:08

1

.list-item-content {
  display: flex;
  align-items: center;
  min-height: 52px;
}

<div class="list-item-content">
    This should be vertically centered if there is room
</div>

Since you set the min-height of .list-item to be 52px, that means it's also safe to assume .list-item-context min-height is also 52px.

answered Aug 10 '18 at 20:08

Andrew Lam

3,675
4
23
34

which "other div" is this wrapping around (as per OP)? – ashleedawg Jan 03 '23 at 13:54

Razvan Zamfir · Accepted Answer · 2018-08-11T10:44:21.123

Wrap the text you want to center in an HTML element and center that element using flexbox:

.list-item {
  min-height: 52px;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: stretch;
  margin:  5px 0;
}

.list-item-status-container {
  padding-right: 10px;
  display: flex;
  align-items: stretch;
  border-left: 6px solid #90CAF9;
  background-color: #E3F2FD;
  max-width: 300px;
  white-space: nowrap;
}

.list-item-status-content {
  padding-left: 10px;
  padding-right: 8px;
  margin-top: auto;
  margin-bottom: auto;
}

.list-item-content {
  font-size: 17px;
  display: block;
  vertical-align: middle;
  font-weight: 500;
  padding-left: 8px;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
}

.list-item-content p,
.list-item-status-content > div {
  margin-top: auto;
  margin-bottom: auto;
}

.list-item-content > div {
  width: 200px;
}

.item-unchecked-box {
  color: #BDBDBD;
  padding-right: 8px;
  display: inline-block;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />

<div class="list-item">
  <div class="list-item-status-container">
    <div class="list-item-status-content">
      <div>
        <div class="item-unchecked-box">
          <i class="fas fa-square fa-lg"></i>
        </div>
        Warning <i style="padding-left: 4px;" class="fas fa-caret-down status-caret-down"></i>
      </div>
    </div>
  </div>
  <div class="list-item-content">
    <p>This should be vertically centered if there is room.</p>
  </div>
</div>

<div class="list-item">
  <div class="list-item-status-container">
    <div class="list-item-status-content">
      <div>
        <div class="item-unchecked-box">
          <i class="fas fa-square fa-lg"></i>
        </div>
        Warning <i style="padding-left: 4px;" class="fas fa-caret-down status-caret-down"></i>
      </div>
    </div>
  </div>
  <div class="list-item-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, esse deleniti odio fugiat culpa excepturi enim omnis laborum distinctio officia odit laudantium aliquid sint, ad expedita alias. Voluptatem, eveniet, odio.</p>
  </div>
</div>

Vertically center and wrap text around another div

4 Answers4