Question

我在这里茫然不知所措，我已经尝试了好几个小时，试图使一些文本仅在一行中垂直放置在另一个div中。当有多次时，它看起来很棒并且包裹得很漂亮。

这是我在说什么的照片： photo

如何修复第一个实例（仅一行），使其在框中垂直居中？ Here's a bootply.

谢谢！

Answer 1

您需要使用CSS将父容器设置为display: table;，然后将容器设置为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>

Answer 2

您需要像下面一样添加sed -Ei "s/^php_version: \"[0-9]+\.[0-9]+\"/php_version: \"${phpVersion}\"/g" fileToSearchReplace.txt

text-center

我假设您正在使用引导程序？

Answer 3

.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>

由于您将min-height的{{1}}设置为.list-item，因此可以安全地假设52px .list-item-context也是min-height

Answer 4

将要居中的文本包装在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>

将文字垂直居中并环绕另一个div

4 个答案: