Question

感谢您的光临。我试图让我所有的blockquote都相同的高度。正如你所看到的那样，在添加overflow:hidden之后我的话开始被切断了。我似乎无法找到解决它的好方法。你们有人可以帮忙吗？

Ps：对不起我的问题的误导性标题，我想要做的实际上是给所有具有相同高度的blockquote。在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一个弹性框，删除了行高，将高度更改为120px，使块3适合水平和垂直方向并使内容居中。

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

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

position: absolute：根据边距和父元素内部设置位置
top和left：从上边和左边设置边距为50％，但是从外部元素的中心开始显示文本或div不可见
transform：将iner对象向上和向右转换为其高度和宽度的50％

Answer 3

你在html标签中提到了.text-center{ text-align:center; }类，而没有写css。

[x1, x2, x3] -> [y1]

它应该工作正常

Answer 4

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

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

如何使所有blockquote具有相同的高度？

4 个答案: