我如何能中心文本(水平和垂直)在一个div块?

我有一个div设置显示:块(90px高和宽)，我有一些文本在里面。

我需要文本在中心垂直和水平对齐。

我已经尝试了text-align:center，但它不做垂直居中部分，所以我尝试了vertical-align:middle，但它不起作用。

什么好主意吗?

当前回答

添加行显示:table-cell;到该div的CSS内容。

只有表格单元格支持vertical-align: middle;，但是你可以把[table-cell]定义给div…

一个活生生的例子在这里:http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; /* This says treat this element like a table cell */
    vertical-align:middle; /* Now we can center vertically like in a TD */
}

2011-04-18 13:28:13

其他回答

添加行显示:table-cell;到该div的CSS内容。

只有表格单元格支持vertical-align: middle;，但是你可以把[table-cell]定义给div…

一个活生生的例子在这里:http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; /* This says treat this element like a table cell */
    vertical-align:middle; /* Now we can center vertically like in a TD */
}

2011-04-18 13:28:13

.cell-row{显示:表;宽度:100%;身高:100 px;background - color: lightgrey;text-align:中心} .cell{显示:table-cell} .cell-middle {vertical-align: middle} < div class = " cell-row”> <div class="cell - cell-middle">Center</div> < / div >

2017-09-27 16:17:45

在父div中添加以下代码

display: grid;
place-items: center;

2020-08-18 13:42:27

GRID

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center { 显示:网格; justify-items:中心; 对齐项目:中心; ｝ .box { 宽度:200 px; 身高:100 px; 背景:红色; ｝ <div class="box center">我的文本</div>

2020-04-06 18:06:07

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html>

2018-07-07 14:00:49

我如何能中心文本(水平和垂直)在一个div块?

推荐文章

最新文章

标签