html - 垂直居中并将文本环绕在另一个 div 周围

Question

<分区>

Answer 1

将要居中的文本包裹在 HTML 元素中，并使用 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>