垂直对齐固定区域中的文本 [英] Vertically aligning text in a fixed area

问题描述

我有一系列的元素有一个图片下面包含文本的块。有时，文本变得太长，突破到第二行。它看起来像这样：

我需要垂直对齐文本，所以它总是居中。我在这里创建了一个jsfiddle以帮助提供答案： http://jsfiddle.net/WDChT/

解决方案

任何想法如何做到这一点给我的html / css？ >在容器框中：

  line-height：60px; 
 height：60px; 
  

内盒：

  display：inline-block; 
 vertical-align：middle; 
  

http://jsfiddle.net/8QMGf/

请注意，inline-block不适用于旧的IE，但结果不会是这样坏

HTH

I have a series of elements that have a picture with a block underneath it containing text. Occasionally, the text becomes too long and breaks onto a second line. It looks like this:

I need to vertically align the text so it is always centered. I created a jsfiddle here to help provide an answer: http://jsfiddle.net/WDChT/

Any ideas how I can do this given my html/css?

解决方案

in the container box:

line-height:60px;
height:60px;

inner box:

display:inline-block;
vertical-align:middle;

http://jsfiddle.net/8QMGf/

note that inline-block doesn't work with older IEs, but the result will not be so bad

HTH

这篇关于垂直对齐固定区域中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！