鱼C论坛

 找回密码
 立即注册
查看: 7765|回复: 24

[已解决]关于垂直居中的问题

[复制链接]
发表于 2019-6-20 15:57:16 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
<!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-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 - 私家藏货之@垂直居中 | 【嘘...】


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2019-6-20 15:58:26 | 显示全部楼层
为什么 我加了vertical-align: middle; 元素  无法垂直居中呢   
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-6-20 16:26:24 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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 - 私家藏货之@垂直居中 | 【嘘...】


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-1 20:04:37 | 显示全部楼层
留个名,准备python学完,学web,
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-25 18:39:24 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-8-25 18:40:50 | 显示全部楼层

回帖奖励 +1 鱼币

咳咳,为鱼币而来,无意打扰
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-25 23:06:07 | 显示全部楼层

回帖奖励 +1 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-8-26 14:15:32 | 显示全部楼层
谢谢您嘞
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-26 14:21:35 | 显示全部楼层

回帖奖励 +1 鱼币

莫得鱼币
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-31 06:59:06 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-9-10 18:05:23 | 显示全部楼层

回帖奖励 +1 鱼币

看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-10-2 18:57:12 | 显示全部楼层

回帖奖励 +1 鱼币

挺好的,已经解决了.
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-30 16:48:31 | 显示全部楼层

回帖奖励 +1 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-6-22 12:52:22 | 显示全部楼层

回帖奖励 +1 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-6-24 17:34:06 | 显示全部楼层
有范围
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-6-24 18:17:02 | 显示全部楼层

回帖奖励 +1 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-7-3 18:48:53 | 显示全部楼层

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-7-9 10:19:11 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-7-9 10:29:21 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 10:40

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表