如何水平和垂直居中对齐div中的文本？ [英] How to horizontally and vertically center align the text in the div?

问题描述

我们如何在这个div中心（水平和垂直）放置文本？

HTML

 < div class =text> 
 hello是testhello是testhello是testhello是testhello是testhello是
 testhello是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; 
} 
  

解决方案

。阅读此文件。

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

如果您想要纵向&水平中心到未知高度，宽度元素。您必须将父级的样式作为display：table，将child的样式作为display：table-cell。

// UPDATED

如果你知道高度&

  .parent { 
 display：block; 
 position：relative; 
} 
 
 .child {
 display：block; 
 height：x; 
 width：y; 
 position：absolute; 
 top：50％; 
 left：50％; 
 margin-top：-x / 2; //一半的负方向的高度
 margin-left：-y / 2; //宽度减半方向
} 
  

How can we center (horizontally and vertically) the text in this 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;
}

解决方案

Here is the full explanation here. Read this.

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

If you want to vertical & horizontal center to unknown height, width element. you must add the style for parent as display:table and the style for child as display:table-cell.

//UPDATED

if you know the height & width of the element.

Try this.

.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
}

这篇关于如何水平和垂直居中对齐div中的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！