div Bootstrap 3 中的垂直对齐句子

Question

所以我使用的是 Bootstrap 的最新版本并且我有以下 div

<div class="col-sm-6 col-md-2 col-lg-8 memory textContainer">
    <p>{{ $memory->description }}</p>
</div>

句子的最大长度为 200 个字符，所以一个都放不下 line.For 我的垂直对齐我有以下 CSS.

.textContainer {
    height: 200px;
    line-height: 200px;
}

.textContainer p {
    height: 200px;
}

这是有效的，但当句子长于一行时无效，因为两行之间的间距为 200px，如下图所示。

是否有解决此问题的方法？非常感谢！

Answer 1

这对你有用吗？

.textContainer {
    height: 200px;
    background: silver;
    position: relative;
}
.textContainer p {
    position: absolute;
    padding: 0;
    margin: 0;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

<div class="textContainer">
    <p>content content content content content content content content content content content content content content content</p>
</div>

Answer 2

您想要什么样的跨浏览器兼容性？接受的答案在不支持 css3 转换的浏览器中不会很好地工作。如果您需要支持旧版浏览器，试试这个：

<div class="col-sm-6 col-md-2 col-lg-8 memory textContainer">

  <div class="centered">
    <p>{{ $memory->description }}</p>
  </div>

</div>

.textContainer {
height: 200px;
}
/* The ghost, nudged to maintain perfect centering */
.textContainer:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
}

参考：https://css-tricks.com/centering-in-the-unknown/

div Bootstrap 3 中的垂直对齐句子

Vertical align sentence in div Bootstrap 3

css

alignment

vertical-alignment

twitter-bootstrap