(转载)css垂直水平居中的整理
方法一
.demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo1 img { vertical-align:middle;}
方法二
.demo2 { width:180px; height:180px; display:table-cell; vertical-align:middle; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo2 img { vertical-align:middle;}
方法三
.demo3 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;}
.demo3_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}
.demo3_inner img { position:relative; top:-50%; left:-50%;}
.demo3 >/**/ .demo3_inner { position:static;}
.demo3 >/**/ .demo3_inner > img { position:static;}
文字
.demo4 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;}
.demo4_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}
.demo4_inner p { position:relative; top:-50%; left:-50%;}
.demo4 >/**/ .demo4_inner { position:static;}
.demo4 >/**/ .demo4_inner > p { position:static;}
(转载)css垂直水平居中的整理的更多相关文章
- CSS垂直水平居中方法整理
CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...
- CSS垂直水平居中方法总结
在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...
- 关于css垂直水平居中的几种方式
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...
- css 垂直+水平居中
垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论 1.父盒子固定高度[定位] 实现1: father-box: position:relative child-box:p ...
- css 垂直水平居中总结
一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...
- css垂直水平居中方案
1. 水平居中 如果是inline元素:在父元素上面设置text-align:center; 如果是block元素:设置宽度和margin:0 auto; 如果是多块级元素:在父元素上面设置text- ...
- CSS垂直水平居中
小小的总结一下:行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto; 首先讨论一下单行时的情况. 毫无 ...
- 关于用css实现文本和图片垂直水平居中
关于用css实现文本和图片垂直水平居中 一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...
- css实现垂直水平居中的方法(个数不限)?
方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...
随机推荐
- [Unix.C]文件I/O
大多数unix文件I/O操作只需要用到5个函数:open.read.write.lseek和close.此处所说明的函数均为不带缓存的I/O操作(下同).不带缓存指的是每个read和write都调用内 ...
- 实现自己的脚本语言ngscript之一:词法分析
正则表达式的理论基础可以参考装配脑袋的 这个 自己动手开发编译器(二)正则语言和正则表达式 这个 自己动手开发编译器(三)有穷自动机 还有这个 自己动手开发编译器(四)利用DFA转换表建立扫描器 如果 ...
- UVa 10029 hash + dp
题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- MySQL基本配置
>>添加环境变量 把MySQL Server的bin目录添加到系统path中. >>MySQL启动和停止命令 net start mysql56 net stop mysql5 ...
- 深度学习Matlab DeepLearningToolBox 工具包最常见错误解决办法\
deeplearningtoolbox 下载链接github : https://github.com/rasmusbergpalm/DeepLearnToolbox,只需要解压到matlab当前工 ...
- maven 私服 配置 转
3 . Nexus预置的仓库 点击左侧 Repositories 链接,查看 Nexus 内置的仓库: Nexus 的仓库分为这么几类: hosted 宿主仓库:主要用于部署无法从公共仓库获取的构件( ...
- php异步请求模拟多进程
在A请求页面发起另一个B页面请求 不需要等待B页面执行结束再返回 直接往下执行A页面的请求 A页面代码 <?php $url = 'http://'.$_SERVER['HTTP_HOST']. ...
- range() 函数创建并返回一个包含指定范围的元素的数组
语法 range(first,second,step) 参数 描述 first 必需.规定数组元素的最小值. second 必需.规定数组元素的最大值. step 可选.规定元素之间的步进制.默认是 ...
- C# 二进制替换第一弹 byte 数组替换
在做通讯相关的数据操作时常常须要用到 byte[] byte 数组替换操作.比方协义转换相关的 如今提供了几种替换的方法 /// <summary> /// 二进制数据 操作 /// ...
- iOS-UIResponse之事件响应链及其事件传递
UIResponse之事件响应链及其事件传递 我们的App与用户进行交互,基本上是依赖于各种各样的事件.一个视图是一个事件响应者,可以处理点击等事件,而这些事件就是在UIResponder类中定义的. ...