竹茶 发表于 2019-6-20 15:57:16

关于垂直居中的问题

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vertical-align</title>
<style>
    .example{
border:1px solid;
text-align: center;
height:100px;
}
.element{
border:1px solid;
vertical-align: middle;
}
</style>
</head>

<body>
   <div class="example">
    <div class="element">元素</div>
   </div>
</body>

</html>

竹茶 发表于 2019-6-20 15:58:26

为什么 我加了vertical-align: middle; 元素无法垂直居中呢   

newu 发表于 2019-6-20 16:26:24

https://blog.csdn.net/qq_28166403/article/details/83509416

不二如是 发表于 2019-6-21 09:14:08

1、垂直居中是有适用范围的。

若元素是单行文本, 则可设置 line-height 等于父元素高度

若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央

可用 vertical-align 属性, 而 vertical-align 只有在父层为 td 或者 th 时, 才会生效。

对于其他块级元素, 例如 div、p 等, 默认情况是不支持的。

为了使用 vertical-align, 我们需要设置父元素 display:table, 子元素 display:table-cell;vertical-align:middle;

2、推荐阅读：实用Tips - 28 - 私家藏货之@垂直居中 | 【嘘...】


majian890324 发表于 2020-5-1 20:04:37

留个名，准备python学完，学web，

昨非 发表于 2020-8-25 18:39:24

{:10_301:}

昨非 发表于 2020-8-25 18:40:50

咳咳，为鱼币而来，无意打扰

开心小傻猪 发表于 2020-8-25 23:06:07

{:10_277:}

象棋爱好者 发表于 2020-8-26 14:15:32

谢谢您嘞

象棋爱好者 发表于 2020-8-26 14:21:35

莫得鱼币

majian890324 发表于 2020-8-31 06:59:06

{:10_279:}{:10_279:}

hornwong 发表于 2020-9-10 18:05:23

看看

一抹心尘 发表于 2020-10-2 18:57:12

挺好的，已经解决了.

心驰神往 发表于 2020-10-30 16:48:31

{:9_227:}

Dragon910623 发表于 2021-6-22 12:52:22

{:10_277:}

高山 发表于 2021-6-24 17:34:06

有范围

超级玛尼哄 发表于 2021-6-24 18:17:02

{:10_279:}

1835575828 发表于 2021-7-3 18:48:53

好

sunwenwu 发表于 2021-7-9 10:19:11

{:10_254:}

sunwenwu123 发表于 2021-7-9 10:29:21

{:10_279:}
页: [1] 2
查看完整版本: 关于垂直居中的问题