html - 如何使所有 block 引用具有相同的高度？

Question

感谢您的光临。我试图让我所有的 blockquote 高度相同。如您所见，我的话在添加 overflow:hidden 后开始被截断。我似乎找不到解决它的好方法。你们能帮忙吗？

Ps:对于我的问题的误导性标题，我深表歉意，我想做的实际上是让所有 block 引用具有相同的高度。不是文本在 div 中心对齐。

blockquote {
  overflow: hidden;
  height: 100px;
  line-height: 100px;
  display: block;
  background: #ddd;
  border-left: 10px solid black;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "“" "”" "‘" "’";
}

blockquote:before {
  color: #000;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.10em;
  vertical-align: -0.4em;
}

blockquote:after {
  color: #000;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote p {
  display: inline;
}

<div class="container">
  <div class="row text-center">

    <div class="col-md-12 text-center">
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </blockquote>
      <p>Person 1</p>
    </div>

    <div class="col-md-12 text-center">
      <blockquote>
        <p>Nam quis nisl lorem. Sed vulputate, ipsum id vulputate placerat, ante ante tempor orci, a pulvinar dolor enim et felis. Aliquam at sapien arcu.</p>
      </blockquote>
      <p>Person 2</p>
    </div>

    <div class="col-md-12 text-center">
      <blockquote>
        <p>Vivamus eu enim dolor. Donec sed nulla ligula. Etiam maximus diam vel felis aliquet, a placerat magna euismod. In pellentesque elit lorem, vel dictum mauris blandit at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
          ac turpis egestas.</p>
      </blockquote>
      <p>Person 3</p>
    </div>


  </div>
</div>

Answer 1

我将引号链接到段落而不是 blockquote。然后我将 blockquote 变成了 flexbox，删除了行高，将 block 3 的高度更改为 120px 以适应内容并在水平和垂直方向居中。

blockquote {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #ddd;
  border-left: 10px solid black;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "“" "”" "‘" "’";
}

blockquote p:before {
  color: #000;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.10em;
  vertical-align: -0.4em;
}

blockquote p:after {
  color: #000;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-left: 0.10em;
  vertical-align: -0.4em;
}

blockquote p {
  display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row text-center">

    <div class="col-md-12 text-center">
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </blockquote>
      <p>Person 1</p>
    </div>

    <div class="col-md-12 text-center">
      <blockquote>
        <p>Nam quis nisl lorem. Sed vulputate, ipsum id vulputate placerat, ante ante tempor orci, a pulvinar dolor enim et felis. Aliquam at sapien arcu.</p>
      </blockquote>
      <p>Person 2</p>
    </div>

    <div class="col-md-12 text-center">
      <blockquote>
        <p>Vivamus eu enim dolor. Donec sed nulla ligula. Etiam maximus diam vel felis aliquet, a placerat magna euismod. In pellentesque elit lorem, vel dictum mauris blandit at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
          ac turpis egestas.</p>
      </blockquote>
      <p>Person 3</p>
    </div>


  </div>
</div>