如何在div元素中居中文本？

Question

如何将文本居中在div中？我有以下css代码：我应该使用line-height属性来居中文本吗？

.activebox {
display: inline-block;
width: 40px;
height: 16px;
/*line-height: 20px;*/
background-color: #47DA91;
}

.triangle-left {
display: inline;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 10px solid #47DA91;
border-bottom: 8px solid transparent;
float: left;
}

.activebox p {
color: white;
 }

以及html代码：

<div class="triangle-left"></div>
<div class="activebox"><p>Active</p></div>

以下是jsfiddle示例

谢谢。

Answer 1

将display: table-cell添加到<p>标记本身，类似于：

.activebox p{
    display: table-cell;
}

此外，要么从line-height: 22px移除.activebox样式，因为它会垂直偏移文本或仅将其设置为三角形的最大高度line-height: 16px，然后它仍然看起来很完美。

.activebox {
    display: inline-block;
    width: 40px;
    height: 16px;
    /*line-height: 22px;*/
    line-height: 16px; /* set to 16px or remove all together*/
    background-color: #47DA91;
}

---

DEMO - 使用display: table-cell

---

Answer 2

也可以使用＆＃34; display：table-cell＆＃34;属性。

Vertically align text in a div

Answer 3

.activebox {
   background-color: #47da91;
   display: inline-block;
   height: 16px;
   line-height: 0;
   position: relative;
   text-align: center;
   top: -1px;
   width: 40px;
 }
.triangle-left {
   border-bottom: 8px solid transparent;
   border-right: 10px solid #47da91;
   border-top: 8px solid transparent;
   display: inline;
   float: left;
   height: 0;
   width: 0;
 }
 .activebox p {
   color: white;
   font-size: 11px;
   position: relative;
   top: -3px;
}

Answer 4

为.activebox课程添加以下样式。

display: flex;
align-items: center;

Fiddle

---

参考

• CSS align-items Property
• CSS flex playground

Answer 5

text-align：center;在你的CSS课程