css单行或多行垂直对齐

Question

我有一个可以有一行或多行的标题.

如何垂直对齐文本？如果总是一行,我可以将行高设置为容器高度.

我可以使用JavaScript,但我不是很喜欢它,我正在寻找一种纯粹的CSS方式.

此外,如果容器可以用线条扩展它将是完美的,所以我总是可以在顶部和底部具有相同的填充.

Answer 1

为此你可以使用display:table-cell属性:

.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}

<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

但它适用于IE8及以上版本.阅读本文以获取更多信息:CSS技巧:垂直居中的多层文本.

Answer 2

如果你不喜欢这个display:table技巧(我知道我没有)这里有一个没有它的解决方案:

.cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"\00A0"; overflow:hidden;
}

用HTML

<div class="cen">
 <p>Text in div 1</p>
</div>

这使得div的高度为5em,除非内容更高,否则它会增长.这里有
实例.

编辑:哦,这应该适用于哪些浏览器？IE8不会合作.

(稍后编辑:更新的CSS以处理Chrome中的问题)

Answer 3

我真的很喜欢这个解决方案

<div>
    <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

随意使用样式表,100%的高度...

也可能需要注释span标记之间的空格,因为这些是内联块

幸得阎王.我是从这里得到的

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span>
</div>

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span>
</div>

注意:这似乎不适用于多行内容.