div内跨度的CSS垂直对齐具有自动高度答案

【问题标题】：Css vertical-align for spans inside div have height autodiv内跨度的CSS垂直对齐具有自动高度
【发布时间】：2015-06-04 15:35:12
【问题描述】：

我的 css 有问题。
我在其中有一个 div 和 3 列 span、h3 和 span。
我要：
div {height: auto} //根据h3中的内容自动改变
h3 {height: auto} //这个高度会随着内容的变化而变化。
跨度{垂直对齐：中间}

<div>
   <span>span 1</span>
   <h3>text</h3>
   <span>span 2</span>
</div>

请帮我设计它的样式。谢谢。

【问题讨论】：

【解决方案1】：

div > * {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid red;
}
h3 {
  font-size: 30px;
  height:200px;
}

<div>
  <span>span 1</span>
  <h3>text <br />text</h3>
  <span>span 2</span>
</div>

【讨论】：

嗨 @MonteCristo，我可以为 h3 标签设置 min-height 和 vertical-align，我尝试了，但它不起作用？
@Sophia 不，你不能默认单元格最小高度是内容的高度......它的行为就像一个表格单元格......但是，你可以设置“高度”这将影响单元格的高度...我已经为您更新了...
w3.org/TR/CSS21/tables.html#height-layout > "在 CSS 2.1 中，单元格的高度是内容所需的最小高度。表格单元格的 'height' 属性可以影响行的高度（见上文），但不会增加单元格框的高度。”

【解决方案2】：

简单...使用这个。

div {height: 200px;}
span, h3 {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
    margin: 0;
}

<div>
   <span>span 1</span>
   <h3>text</h3>
   <span>span 2</span>
</div>

【讨论】：