Question

我需要创建类似的东西：文本应该水平和垂直地位于正确的中间位置。我已经水平实现，但在垂直方面存在问题。因为，我的文字是动态的。有时它是两行文本，有时是四行或有时只有一行。

这是我的CSS代码：

.image-container { border:1px solid #CCC; height:300px; width:300px; position:relative; float:left; margin-left:20px; }
p {position:absolute; top:40%; text-align:center; width:100%; }

这是一个html：

 <div class="image-container">
<p> One line Content works perfact</p>
 </div>
 <div class="image-container">
<p> Two line Content:Lorem Ipsum is simply dummy text of the printing </p>
 </div>
 <div class="image-container">
<p> Three Line Content:Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 </div>

请找到小提琴链接：http://jsfiddle.net/YK7V5/

Answer 1

我建议使用display:table和display:table-cell技术：

<强> CSS

.image-container{
  display:table;
  border:1px solid #CCC; 
  height:300px; 
  width:300px; 
  position:relative;
  float:left;
  margin-left:20px;
 }
p {
 display:table-cell;
 text-align:center;
 width:100%;
 vertical-align: middle;
}

fiddle

另请看这里：

6 Methods For Vertical Centering With CSS

Answer 2

嘿，你在小提琴中测试了这个并且它有效：）

.image-container { border:1px solid #CCC; height:300px; width:300px; position:relative; float:left; margin-left:20px; }
    p {text-align:center; display: table-cell; vertical-align: middle; height: 300px; width: 300px;}

希望它适合你：）

文本需要在水平和垂直方向的精确中心

2 个答案: