为什么vertical-align:middle;不起作用

当DIV只有一层时 vertical-align:middle; 是起作用，为什么DIV嵌套基层就不起作用的。

下面这个是有作用的：

<html>
<meta charset="utf8">
<style>
.Absolute-Center { display: table-cell;width: 100px;  height: 100px; border:1px solid red; text-align:center;vertical-align:middle;}
</style>
<body>
<div class="Absolute-Center"><p>居中</p>
</div>
</body>
</html>

当嵌套几个时就不起作用了。那要如何处理呢。

给.center-inner加上 display: table; 然后给 p 加上 display:table-cell; 即可。

<html>
<meta charset="utf8">
<style>
.outer{width:300px;height:500px;border:1px solid red; position:relative;
}
.center { position: absolute;margin: auto;top:0px; bottom:0px; left:0px; right:0px;width: 100px; height: 100px; border:1px solid red;
}
.center-inner {display: table;height: 100%; width: 100%;
}
.center p {display: table-cell;text-align:center; vertical-align:middle;
}
</style>
<body>
<div class="outer"><div class="center"><div class="center-inner"><p>居中</p></div></div>
</div>
</body>
</html>

注释转载：

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内！

说的通俗点，就是你设置的当前div属性还是块对象呈递，但是允许同一级别的div在同一行内，也可以设置宽度和高度！

position: absolute; display: table-cell; equals display: block; position: absolute;

And

vertical-align only applies to inline/table-cell elements.

为什么vertical-align:middle;不起作用相关推荐

css+js+jq实训笔记
css+js+jq实训笔记 css第一天 css第二天 css第三天 css第四天 css第五天 css第六天 js第一天 js第二天 js第三天 js第四天 js第五天 js第六天 jq第一天 jq ...
HTML5+CSS、CSS3基础知识点总结
一.选择器选择器分为基础选择器和复合选择器两大类. 基础选择器由单个选择器组成基础选择器包括:标签选择器.类选择器.id 选择器和通配符选择器(*) 标签选择器优点标签选择器可以把某一标签全部 ...
前端htm cssl总结
第1章 HTML基础 (一) HTML文件的基本结构和W3C标准 l HTML用来描述网页的一种语言,他是一种超文本标记语言(Hyoer Text Markuo Language),HTML不是一 ...
CSS布局解决方案（终结版）
前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环.在页面框架的搭建之中,又有居中布局.多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局. 居中布局水平居中 1)使用inli ...
如何使html中的din居中,CSS 实现完美垂直居中
<?xml version="1.0" encoding="utf-8"?>ttp://www.w3.org/TR/xhtml1/DTD/xhtml ...
大众点评封ip，还字体加密？我直呼，就这啊！
像旧巷子里的猫,我很自由,但没有归宿假如csdn有创作激励该多好,那样就可以天天"水"博客了! 哈喽,大家好,上期给大家伙分享了一期微博数据的爬取 Python爬取微博评论数据, ...
GridView To Excel
将GridView的内容导出到Excel中原文来自:http://gridviewguy.com/ArticleDetails.aspx?articleID=197 介绍: 将GridView的内容 ...
html5怎么把图片垂直居中,css如何让img垂直居中？
css如何让img居中显示?对于刚刚css入门的新手可能还不是很熟悉,下面我们来总结一下css如何让img垂直居中? 一.使用flex实现垂直居中利用 display: flex;align-ite ...
php垂直对齐,CSS垂直对齐不起作用的原因及解决方法
verticla-align用于调整内联元素的垂直位置,但是有时候它不起作用,本篇文章将来给大家分享关于CSS垂直对齐不起作用的原因和解决方法. 我们先来分析一下导致垂直对齐无效的原因我想很多人都会 ...

为什么vertical-align:middle;不起作用

为什么vertical-align:middle;不起作用相关推荐

最新文章

热门文章