如何水平和垂直居中对齐div中的文本?

时间:2014-04-11 12:44:38

标签: css

我们如何在这个div中居中(水平和垂直)文本?

HTML

<div class="text">   
hello is the the testhello is the the testhello is the the testhello is the the testhello is the the testhello is the the    
testhello is the the tes   
</div>

CSS

.text {
    width:150px; 
    background:red;
    float:left;
    height:150px;
    margin:10px; 
    text-align:center;
    word-wrap:break-word;
    overflow:hidden;
    color:white;
}

4 个答案:

答案 0 :(得分:2)

这里有完整的解释。读这个。

http://css-tricks.com/centering-in-the-unknown/

如果你想垂直&amp;水平中心到未知高度,宽度元素。您必须将父样式添加为display:table,将子样式添加为display:table-cell。

//修订版

如果你知道身高和高度元素的宽度。

试试这个。

.parent {
  display:block;
  position:relative;
}

.child {
  display:block;
  height:x;
  width:y;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-x/2; //Half of the height with minus direction
  margin-left:-y/2; //Half of the width with minus direction
}

答案 1 :(得分:1)

关于codepen的示例:http://codepen.io/anon/pen/BFqfx/

div {
  width:150px; 
  height:150px;
  line-height: 150px;
  background:red;   
  color: #fff;
}

div p {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: 100%;
  text-align: center;
}

截图

enter image description here

答案 2 :(得分:0)

<强> DEMO

<强> HTML

<div class="foo">
   <div class="bar">
       Unknown stuff to be centered.
   </div>
</div>

<强> CSS

.foo{
   display: table;
   width: 100%;
}
.bar {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

<强> Article

答案 3 :(得分:0)

还有另一种常见的技术,基于&#34;绝对定位&#34;和负的上限。

HTML:

<div class="foo">
   <div class="bar">
       Unknown stuff to be centered.
   </div>
</div>

CSS:

.foo{
   width:150px;
    height:150px;
    background:red;
    position:relative;
}
.bar {
   text-align: center;
    position:absolute;
    top:50%;
    height:40px;
    margin-top:-20px;
    border:solid 1px blue;
}

这个想法是你从内部div的顶部向下移动50%,然后用负边距顶部向上移动一半高度。

非常稳定且跨平台,唯一的限制是你必须知道内部div的高度

为避免此费用计算,解决方法是将margin-top替换为transform: translateY(-50%);。在这种情况下,通过CSS变换在视觉上获得对中心DIV的负向平移。

它非常有用,因为这样你可以在不知道内部DIV高度的情况下使用它,但请记住,转换是从DOM渲染中提取的。