如何使所有块引用具有相同的高度?

Question

感谢您的光临。我试图使我所有的块引用都达到相同的高度。如您所见，我的话在添加overflow:hidden后开始被切断。我似乎找不到一个好的解决方案来修复它。你们谁能帮忙？

Ps：很抱歉我的问题的误导性标题，我试图做的实际上是给出所有具有相同高度的块引用。文本未在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做成一个弹性框，去掉了行高，将块 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>

Answer 2

您在 html 标签中提到了text-center类，而 css 没有编写。

.text-center{
text-align:center;
}

它应该工作正常

Answer 3

如果您的问题是将最大内容的高度设置为其他人，请参阅下面的链接，该链接讨论了设置相同高度的不同方法。

http://callmenick.com/post/css-equal-height-columns-three-different-ways

Answer 4

.text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

• position: absolute：根据边距和父元素内部设置位置
• top和left：将顶部和左侧的边距设置为 50%，但使从外部元素中心开始的文本或div 不可见
• transform：将内侧对象向上和向右变换到其高度和宽度的 50%