CSS样式 vertical-align:middle 垂直居中生效情况
vertical-align:middle 是依赖div内子元素最高的行高来实现对某元素居中的
-------不存在浮动时可以直接生效垂直居中
HTML
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
CSS
<div class="box box1">
<span>垂直居中</span>
</div>
-----如果存在浮动不生效情况 需要通过元素占位的方法居中可以通过:after 或者直接新建元素 (可能是定位影响子元素默认最高的行高)
.box1{
float:left;
}
.box1:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
其他垂直居中方式 浏览器兼容性不能兼容较低版本 很多是HTML5样式
display:flex
.box1{
display: flex;
justify-content:center;
align-items:Center;
}
绝对定位和负边距
.box1{position:relative;}
.box1 span{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
绝对定位和0
.box1 span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
translate
.box1 span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
display:flex和margin:auto
.box1{
display: flex;
text-align: center;
}
.box1 span{margin: auto;}
display:-webkit-box
.box1{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center
}
display:-webkit-box
<div class="floater"></div>
<div class="content"> Content here </div>
.floater {
float:left;
height:50%;
margin-bottom:-120px;
}
.content {
clear:both;
height:240px;
position:relative;
}
原文出处:http://www.cnblogs.com/hutuzhu/p/4450850.html
CSS样式 vertical-align:middle 垂直居中生效情况的更多相关文章
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...
- css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
- css样式之垂直居中
1.div的水平居中 margin:0 auto 2.table-cell实现垂直居中 样式:.box{ width: 200px; height: 200px; background: red; } ...
- css样式之vertical-align垂直居中的应用
css样式之vertical-align垂直居中的应用:将图片垂直左右居中 元素垂直居中 1:必须给容器父元素加上text-align:center 2:必须给当前元素转换成行内块元素,display ...
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
- 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...
- css样式,媒体查询,垂直居中,js对象
下面是一些截图,有关查询效率,css样式,媒体查询,垂直居中,js基本类型.
- css样式和定义的class都没问题,但样式却没生效
今天开发遇到过这样的问题,主要原因是 css 文件格式有问题导致的.有问题的 css 样式的那一行下面的 css 样式不能生效
随机推荐
- 分享:宽恕的艺术 Forgive
宽恕的艺术 To forgive may be divine, but no one ever said it was easy. 宽恕是神圣的,但是没有人说很容易做到宽恕别人. When someo ...
- JavaScript学习(6)-文档对象模型基础
JavaScript学习6-文档对象模型基础 1.节点方法 节点对象方法(W3C DOM Level2) 方法 说明 appendChild(newChild) 添加子节点到当前节点的末端 clone ...
- ctf-HITCON-2016-houseoforange学习
目录 堆溢出点 利用步骤 创建第一个house,修改top_chunk的size 创建第二个house,触发sysmalloc中的_int_free 创建第三个house,泄露libc和heap的地址 ...
- Threaten Model
探测(扫描器,情报搜集)--入侵(vul,exp)--潜伏(RATS,setmft,AFSET)--横向入侵(admin cert,RATS)---信息泄漏(vpn,rats,通讯通道)--删除踪迹( ...
- IE8数组不支持indexOf方法的解决办法
在使用indexof方法之前加上以下代码就可以了. if (!Array.prototype.indexOf){ Array.prototype.indexOf = functio ...
- 1.1 - python基础语法 - 总结练习题
1.编译型与解释型语言的区别,哪些属于编译型,哪些属于解释型 编译型:c/c++/go 运行速度快,开发效率低,不可跨平台 解释型:python/java/php/ruby 运行速度低,开发效率高,可 ...
- C++ 带有通配符*与?的字符串匹配
题目:两个字符串,一个是普通字符串,另一个含有*和?通配符,*代表零个到多个任意字符,?代表一个任意字符,通配符可能多次出现.写一个算法,比较两个字符串是否相等. 发现许多公司笔试面试都有这道题目,于 ...
- java爬取网页内容 简单例子(1)——使用正则表达式
[本文介绍] 爬取别人网页上的内容,听上似乎很有趣的样子,只要几步,就可以获取到力所不能及的东西,例如呢?例如天气预报,总不能自己拿着仪器去测吧!当然,要获取天气预报还是用webService好.这里 ...
- excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")
前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数 选中需要显示结果的单元格,假设我们要判断第一行第一列的单元格A1是否含有“ ...
- XTU1198:Candy(背包)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/libin56842/article/details/26182519 题目描写叙述 Henry和Le ...