鍍金池/ 問(wèn)答/HTML/ 文本如何垂直居中？

文本如何垂直居中？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
div{
    width:300px;
    height:70px;
    border:1px solid red;
    font-size:30px;
    line-height:70px;
    vertical-align:middle; 
    text-align:center;
    padding:0px;
    margin:0px;
}
</style>
</head>
<body>
    <div>
        <p>hello world</p>
    </div>
</body>
</html>

效果如下：

圖片描述

ling-height = div的height 不起作用？
vertical-align:middle; 也不起作用。

圖片描述

回答
編輯回答
久不遇

你把div限制死了，p溢出來(lái)了當(dāng)然不居中
你把css里的div 改成p就居中了

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
p{
    width:300px;
    height:70px;
    border:1px solid red;
    font-size:30px;
    line-height:70px;
    vertical-align:middle; 
    text-align:center;
    padding:0px;
    margin:0px;
}
</style>
</head>
<body>
    <div>
        <p>hello world</p>
    </div>
</body>
</html>
2018年5月12日 18:44
編輯回答
喵小咪

文本是根據(jù)行高來(lái)的啊， line-height:70px;如果你去掉了默認(rèn)的內(nèi)外邊距，你標(biāo)記的那段距離應(yīng)該是35左右

2017年10月20日 06:10
編輯回答
擱淺

父級(jí)：

display: table-cell;
vertical-align: middle;
height: 65px;
width: 65px;

子級(jí)：

display: inline-block;
vertical-align: middle;
2018年7月29日 23:22
編輯回答
玩控

看這么多大神都給你答案了，你還沒(méi)有采納，我決定來(lái)個(gè)終極答案；
且看圖：
圖片描述
圖藍(lán)色區(qū)域是div元素的盒子，磚紅色區(qū)域是div塊級(jí)元素的占位
圖片描述
圖藍(lán)色區(qū)域是p元素的盒子，上下的磚紅色區(qū)域是p元素在chrome中的默認(rèn)margin值，瀏覽器顯示是1em;
那這個(gè)1em是多少呢，em是一個(gè)相對(duì)單位，相對(duì)于父容器的文字大小
也就是說(shuō)，父容器font-size多大，子容器中1em就是多大，那這里父容器font-size是35px那這個(gè)上margin和下margin就各是35px；
另外：你p標(biāo)簽沒(méi)有設(shè)置文字大小，其繼承了父容器的font-size,所以p中文本字號(hào)也是35px

解釋了你的問(wèn)題，然后再給你一個(gè)解決方案，怎么讓文字垂直居中呢，簡(jiǎn)單了，去掉margin就OK
圖片描述

2018年3月15日 04:30