文本以最小高度为中心并调整容器的高度

Question

我正在尝试使用水平容器,填充可变大小的文本.如果文本很短,则容器应具有最小高度并垂直居中.如果文本较长,容器应增加其高度,保持垂直和底部边距.

我准备了一个jsfiddle 这个小提琴受到了这个答案的启发,也尝试display: table了这个答案和这一个

Answer 1

您可以使用flexbox并使内容居中 justify-content

div.row {
  border: 1px dotted black;
  min-height:65px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

<div class="row">
  <div class="content">
    This is a case where we have a small text;
  </div>
</div>
<div class="row">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis felis ultricies fermentum elementum. Duis sollicitudin, ligula in posuere sagittis, nibh ex imperdiet ante, quis efficitur est nisl quis nulla. Donec pharetra feugiat arcu sed hendrerit. Integer aliquet porta erat, quis aliquet eros. Sed in pulvinar felis, eget lobortis dui. Vestibulum vitae imperdiet orci, in varius magna. Praesent venenatis, eros quis tristique accumsan, justo tellus tempus metus, vitae pellentesque nisl risus eu diam. Suspendisse lobortis ex et fringilla mattis. 
  </div>
</div>