css固定宽高DIV内部元素垂直居中的方法
应用案例
案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的。很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定padding或者margin,始终不变。造成了垂直方向不会居中!
我们知道,假如下面一个div
<div class="outer"><div class="inner">haorooms内部内容</div></div>
样式是这样的
.outer{text-align:center;vertical-align: middle;width:200px;height:350px;}
vertical-align:middle是不管用的,很多朋友就在.inner上面做文章了,和我上面说的,加margin等等!那对于这种情况,有没有更好的解决方案呢?
解决方法
思路:加一个cssHack,设置cssHack的line-height等于外层div的高度,就可以使用vertical-align:middle了!
div如下:
<div class="outer">
<div class="inner">haorooms内部内容</div><div class="v">cssHack</div>
</div>
样式如下:
* {
margin: 0;
padding: 0;
}
.outer {
background-color: #ccc;
font-size: 24px;
height: 350px;
text-align: center;
overflow: hidden;
width: 280px;
}
.outer .inner,
.outer .v {
display: inline-block;
zoom: 1;*display: inline; /* 用于触发支持IE67 inline-block */
}
.outer .inner {
line-height: 1.8;
padding: 0 4px 0 5px;
vertical-align: middle;
width: 262px;
}
.outer .v {
line-height: 350px;
text-indent:-9999px;
width: 1px;
}
这样就实现了div内部的垂直居中了!
css固定宽高DIV内部元素垂直居中的方法的更多相关文章
- HTML/CSS:div居中和div内部元素垂直居中(1)
div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- 如何实现固定宽高的DOM元素的水平垂直居中
效果:
- 关于百分比宽高div居中并垂直居中问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- div内部元素居中
要让div内部元素垂直居中,则给div加上此css样式: .div-vertical-middle{ height:200px; width:304px; line-height:50px; ...
- div 固定宽高 水平垂直居中方法
div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...
- 固定宽高的DIV绝对居中示例
看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数, ...
- css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
随机推荐
- HTML使用正则验证
制作HTML前台用户验证等,需要对用户名或者密码进行验证,这时使用正则表达式能够精确地对text进行限制. 具体在HTML中的运用代码如下: 转自 https://blog.csdn.net/weix ...
- LeetCode上的SQL练习
184. 部门工资最高的员工 SELECT D. NAME Department, E. NAME Employee, E.Salary FROM -- 内连接两张查询表 Employee E INN ...
- Java并发编程入门(二)
1.竞态条件 1.1 定义 当某个计算的正确性取决于多个线程的交替执行时序时,就会发生竞态条件.换句话说,正确的结果要取决于运气. 最常见的竞态条件类型:先检查后执行(Check-Then-Act)操 ...
- Maven系列(一) -- maven仓库的搭建
从今天开始,我要写一个maven系列的文章,以帮助大家来更好的熟悉maven仓库,并且将自己优秀的的代码开源出去,一方面为开源做贡献,另一方面顺便提升自己的知名度,让我们把愉快的开始吧 为什么要搭建m ...
- spring的各种注入
java package cn.ioc.student; import java.util.List; import java.util.Map; import java.util.Set; publ ...
- java对数据库性能测试
package com.mysql; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepar ...
- eatwhatApp开发实战(四)
之前我们做了添加店铺了功能,接下来我们做删除功能,并介绍对话框的使用方法. 在init()中注册listview的item点击监听 //注册监听 shop_lv.setOnItemClickListe ...
- Burpsuite代理socks流量
一 设置sock代理 二 设置浏览器代理 三 设置burpsuite代理 四 浏览器访问验证 总结:增加取证难度,隐藏你自己ip,别光着屁股跑了O-O!
- golang内置类型和内置函数
golang内置类型和内置函数是不需要引入包直接可用的 golang内置类型: 数值类型 string int,unint float32,float64 bool array 有长度的 comple ...
- Rocket - debug - Periphery
https://mp.weixin.qq.com/s/uGxn-Xec0LkwdaSsCtQBvw 简单介绍Periphery的实现. 1. ExportDebugDMI/ExportDebugJTA ...