inline-block,vertical-align:middle
现在inline-block貌似可以替代float来实现多个item的排列分布吧
div是块级元素,如果不设置他的明确的宽度,那他就等于父元素的宽度,如果想让他其它随着子元素的变化而变化,需要改变他的css diplay属性为inline-block
可包裹div容器
inline-block:img input
inline-block来实现图片垂直水平居中
<a>
<img src=''/>
</a>
a:display:inline-block vertical-align:middle,text-align:center
就可以实现图片在a标签里面水平垂直居中了
但是好像实现不了垂直居中,给a标签设置一个高度的时候,图片并没有直接就垂直居中了
然后又是一个知识点vertical-align:middle
这个垂直居中的,我一开始还以为跟text-align:center一样的用法一样的作用,后面发现并不是这样的 我去
如果一个
<div>
<div style='vertical-align:middle;display:inline-block'>1213</div>
</div>
以为这样应该可以垂直居中啊
发现并不是
我感觉我的理解就是这个vertical-align的基线是跟自己的兄弟元素来的
如果在大的div里面再设置一个空的div
<div class='container>
<div style='vertical-align:middle;display:inline-block'>1213</div>
<div style='display:inline-block;vertical-align:middle;height:100%;width:0'></div>
</div>
然后我的理解就是这个1213的这个div就是按照他的这个width:0.height:100%的兄弟节点来垂直居中的
恩恩 这样是可以实现垂直居中的效果
新建一个差不多就是空的div吧,但是height一定要是父元素的100%哦 因为你是想这个元素在父元素里面实现垂直居中的喔
哦哦,貌似可以不用新建一个div喔,好像看资料可以用:after这个伪类来代替这个新的div
.container:after{diaplay:inline-block;content:'',width:0;height:100%;vertical-align:middle}
哈哈 有兴趣的小伙伴可以试试
恩恩 还有什么我没有想到的 你又刚好知道的
可以给我留言哦
哈哈哈
vertical-align:middle好像太 博大精深了吧
一个段落在多行文字里面实现垂直居中
<div class='container'>
<span>多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中多行文字垂直居中</span>
</div>
<style type="text/css">
.container{
height:500px;
width:200px;
display: table-cell;
vertical-align: middle;
}
.container span{
font-size: 16px;
vertical-align: middle;
}
</style>
这个vertical-align:middle好像是display单元格里面设置vertical-align:middle里面的内容就会实现垂直居中的效果
inline-block,vertical-align:middle的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
随机推荐
- UVA.674 Coin Change (DP 完全背包)
UVA.674 Coin Change (DP) 题意分析 有5种硬币, 面值分别为1.5.10.25.50,现在给出金额,问可以用多少种方式组成该面值. 每种硬币的数量是无限的.典型完全背包. 状态 ...
- 微信小程序 事件绑定 bind和catch 区别
转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...
- 【单调队列】【P2627】 修剪草坪
传送门 Wa这次竟然不是Uva的题 Description 在一年前赢得了小镇的最佳草坪比赛后,Farm John变得很懒,再也没有修剪过草坪.现在,新一轮的最佳草坪比赛又开始了,Farm John希 ...
- 【链表】【UVA11988】Broken Keyboard
传送门 明明是道黄题我竟然来写博客……我真的是什么数据结构也不会写了 Description 你在输入文章的时候,键盘上的Home键和End键出了问题,会不定时的按下.你却不知道此问题,而是专心致志地 ...
- HDU 5249 离线树状数组求第k大+离散化
KPI Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- ZooKeeper文档(二)
ZooKeeper:因为协调的分布式系统是一个动物园 ZooKeeper对分布式应用来说是一个高性能的协调服务.它暴露通常的服务-比如命名,配置管理,同步,和组服务-用一种简单的接口,所以你不用从头开 ...
- 关于$.data(element,key,value)与ele.data.(key,value)的区别
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- zoj 2006 Glass Beads
Glass Beadshttp://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1006 Time Limit: 2 Seconds ...
- Linux修改服务器ip
Linux基础二(修改ip地址.修改网关.修改DNS服务器.重新启动网络配置) 网络的初始化 .ip地址的修改(临时生效) 使用ifconfig命令 ifconfig 网卡名 ip地址 netma ...
- MyBatis框架的使用及源码分析(十) CacheExecutor,SimpleExecutor,BatchExecutor ,ReuseExecutor
Executor分成两大类,一类是CacheExecutor,另一类是普通Executor. 普通类又分为: ExecutorType.SIMPLE: 这个执行器类型不做特殊的事情.它为每个语句的执行 ...