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 样式不能生效
随机推荐
- ubuntu重启不清除 /tmp 设置
gedit /etc/default/rcS, 把TMPTIME=0 修改成 TMPTIME=-1,保存退出即可.
- Xcode6 部署iphone4s出现的问题 No architectures to compile for
手贱升级到了Xcode6.结果一打开来就爆了各种错误换个警告; 各种百度和谷歌,终于搞定了,然后插上4S,结果还是报错. 解决: 1.找到 Build Settings 2.点击 Architectu ...
- Python3: Command not found(Mac OS)
1. 第一步:查看以下路径是否安装有 Python 3.x # 打开以下目录, 版本号有可能不同 cd /usr/local/Cellar/python/3.5.2_3/bin # 查看当前目录的内容 ...
- java基础04 Scanner的使用
import java.util.Scanner; /** * 所有在java.lang包下面的所有类 不需要显示的引入包! * java.util.Scanner : 想获取用户的输入 必须引入相关 ...
- linux伙伴系统接口alloc_page分析1
在内核中分配内存,最后要通过伙伴系统接口进行实际物理页面的分配,一个重要的接口便是alloc_page.本文介绍下alloc_page的主要流程,各个部分的执行.主要包含正常分配流程,当页面不足的时候 ...
- Spring MVC学习(五)---ModelAndView没有明显申明name
看图不解释: 对于这种写法: new ModelAndView().addObject(XXX)
- python - 常用模块 os, sys
常用模块: os(处理文件和目录), sys(sys 模块包含了与 Python 解释器和它的环境有关的函数.) sys.argv 变量是一个字符串的 列表.特别地,sys.argv 包含了 命令行参 ...
- 无法从U盘启动的解决方案
联想台式机无法从U盘启动的解决方案 F1进入lenovo bios 选择 StartUp 选项卡 1) 发现 USB FDD 已处于第一项,再把 USB Key 调到启动第二项 2) 把 boot m ...
- Linux系统常用命令示例
1.在跟下创建一个目录,目录的名字为data # mkdir /data2.在data目录里创建一个文件,文件名为yunjisuan.txt # touch /data/yunjisuan.txt3. ...
- 235. Lowest Common Ancestor of a Binary Search Tree(LCA最低公共祖先)
Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the ...