html laber上下居中,CSS未知高度垂直居中的实现
本文主要介绍了CSS未知高度垂直居中的实现,分享给大家,具体如下:
CSS垂直居中
.container{
width:500px;/*装饰*/
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
垂直居中(table)
好了,我们看其CSS实现。凡是table能做到的,CSS都能做的,但各浏览器在CSS的差异比较大,因此要兼容它们难度很大。这涉及许多细节,各种流啊,display的表现效果与CSS hack,IE早些年搞了大堆的私有属性,这也有待我们深一步挖掘。我们先看最简单的实现,背景图片法
背景图片法
CSS垂直居中
.container {
width:500px;
height:500px;
line-height:500px;
background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg) no-repeat center center;
border:1px solid #f00;
text-align: center;
}
垂直居中
CSS表达式法
司徒正美 CSS垂直居中
.container{
/*IE8与标准游览器垂直对齐*/
display: table-cell;
vertical-align:middle;
width:500px;/*装饰*/
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
.container img{
display:block;/*让其具备盒子模型*/
margin:0 auto;
text-align:center;
margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */
}
垂直居中(CSS表达式)
绝对定位法
司徒正美 CSS垂直居中
div {
/*IE8与标准游览器垂直对齐*/
display:table-cell;
vertical-align:middle;
overflow:hidden;
position:relative;
text-align:center;
width:500px;/*装饰*/
height:500px;
border:1px solid #ccc;
background:#B9D6FF;
}
div p {
+position:absolute;
top:50%
}
img {
+position:relative;
top:-50%;
left:-50%;
}
垂直居中(绝对定位)
display:inline-block法
司徒正美 CSS垂直居中
div {
display:table-cell;
vertical-align:middle;
text-align:center;
width:500px;
height:500px;
background:#B9D6FF;
border: 1px solid #CCC;
}
垂直居中(inline-block法)
writing-mode法
CSS垂直居中
div{
width:500px;
height:500px;
line-height:500px;
text-align:center;
background:#B9D6FF;
border:1px solid #f00;
}
div span{
height:100%\9;
writing-mode:tb-rl\9;
}
div img{
vertical-align:middle
}
垂直居中(writing-mode法)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html laber上下居中,CSS未知高度垂直居中的实现相关推荐
- html垂直居中vertical,HTML_CSS解决未知高度垂直居中,尽管有CSS的vertical-align特性, - phpStudy...
CSS解决未知高度垂直居中 尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, ...
- php中文字怎么上下居中,CSS怎么设置垂直居中?
在我们开发前端页面的时候,为了让页面效果美观,会出现需要垂直居中效果的地方.本章就让我们来了解一下用css如何设置垂直居中,详细介绍一下设置文字与div盒子的垂直居中的几种方法.有一定的参考价值,有需 ...
- css图片跟文字居中,css 图片文字垂直居中
先来看张图片 相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
- 一个未知高度垂直居中的简单方法
最近在看飘舞零零的blog,有感而写. <!DOCTYPE html> <html> <head lang="en"><meta char ...
- 如何使html中的din居中,CSS 实现完美垂直居中
<?xml version="1.0" encoding="utf-8"?>ttp://www.w3.org/TR/xhtml1/DTD/xhtml ...
- html不知道高文字垂直居中,css实现固定高度及未知高度文字垂直居中的完美解决方案...
在工做当中咱们常常碰到相似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而咱们最容易会想到使用表格来垂直居中,或者若是是单行文字 ...
- html盒子嵌套居中,css在盒子中垂直居中和固定居中
顶部固定居中 我是固定的 .w960{ width: 960px; margin:0 auto; } .fixed{ position: absolute; top:0; left: 0; right ...
- css居中最佳方案,CSS 水平、垂直居中的5种最佳方案
CSS 居中对齐 代码中均省略了浏览器前缀 以下例子以我的个人的标准排序 当然也有更多的居中处理方法 但我觉得只有这5种方法是最完善的解决方案 flex 居中 优点:可对未知高度进行居中处理 .wra ...
- android studio table居中代码_五个方法实例代码详解教你在CSS中实现垂直居中
点击上面"蓝字"关注我们 你是否和小编一样在编辑一个版面时,通常用到水平居中和垂直居中,而水平居中很好处理,不外乎就是设定margin:0 auto;或是text-align:ce ...
最新文章
- react.js做小程序_如何使用React.js构建现代的聊天应用程序
- Vue、React打包文件放在服务器,浏览器存在缓存问题的解决
- Nuget很慢,我们该怎么办
- HDFS 文件格式——SequenceFile RCFile
- 带防夹功能的升降器原理_全系标配行车自动落锁功能,全新凯美瑞表现分析
- 依赖注入_Map类型的注入
- Linux之移动复制和删除
- java 线程 获取消息_获取java线程中信息
- XML Schema是什么
- python linux log,linux,python 常用的处理log的命令
- cannot read prpperty ‘start‘ of undefined(问题记录)
- React之组件小析
- Android 版本对于 API
- 【操作系统/OS笔记17】文件系统基本概念、文件描述符、文件系统访问、文件别名、文件系统种类
- boost::serialization 用基类指针转存派生类(错误多多,一波三折)
- [渝粤教育] 西南科技大学 机床电气控制技术 在线考试复习资料
- mysql.server的路径_WindowsMysqlServer重启,log-bin路径配置
- JavaScript网页游戏开发实战视频教程
- 微信小程序 宠物论坛1
- 无猿无故!程序员成语大全
热门文章
- java基础知识-对象和类
- Python 面向对象与 C++、Java 的异同
- 【.NET基础】--委托、事件、线程(2)
- [最新答案V0.4版]微软等数据结构+算法面试100题[第41-60题答案]
- Adaboost算法原理以及matlab代码实现(超详细)
- Python学习笔记:常用内建模块4:hmac
- 在python中嵌入c/c++
- AlexNet代码解读
- php母版页怎么,ASP.NET
- [云炬创业基础笔记]第六章商业模式测试16