inline-block元素上浮无法对齐的解决办法
来源:互联网 发布:免费杀木马软件 编辑:程序博客网 时间:2024/05/06 20:18
不得不说display:inline-block;是一个强大的css属性,它解决了很多float浮动布局的不足,让页面布局更随意、富有弹性。但这个改变了元素类型的属性也存在着很多容易让人忽视的小问题,如之前我有写过的《li标签间有空白是怎么回事? 消除li横排后空隙》,我们姑且称之为“bug”吧(实则不然),只有我们掌握了这些问题的解决办法,才能更加熟练的使用这一布局神器。
笔者这次遇到的一个问题场景是元素设置为display:inline-block;后,部分元素出现了上浮,无法与其他同行元素水平对齐。
部分代码如下:
- <div class="wrap">
- <div class="a">iyaxi.com</div>
- <div class="a">雅兮网</div>
- <div class="a">iyaxi.com</div>
- <div class="a">雅兮网</div>
- </div>
css部分
- <style type="text/css">
- *{
- border: 0;
- padding: 0;
- margin: 0;
- }
- body{
- font-size: 14px;
- }
- .wrap{
- width: 960px;
- margin: 0 auto;
- margin-top: 100px;
- }
- .a{
- width: 100px;
- height: 60px;
- background-color: #0088ff;
- color: #fff;
- display: inline-block;
- *display: inline;
- *zoom:1;
- }
- </style>
可以看到,我们制作的这个小demo,预期是将四个<div>设置为块状行内元素,让他们水平对齐以达到如下图效果。
当四个块状元素内都写有文本的时候,实现了预期的效果;但当其中一个块状元素无内容填充时,出现了异常,该空白元素出现了上浮,导致整个页面变得参差不齐了,如下图,为什么会这样呢?
重点来了(敲黑板!!!)行内元素和替换元素(如<input><textarea>等)会有一个叫做基线(baseline)的玩意,他的位置位于文本框的底部,即文字的最底端;当块状行内元素无文本填充的时候,它的基线就会自动移至元素的最底端;同时,图片以及其他非替换元素的基线也为元素的最底端。
总结起来就是,行内元素和替换元素的基线位于文本框的底端,无文本的块状行内元素、图片和非替换元素的基线就是元素的最底端。大家横向对齐的参照物默认就是这个基线(baseline)
所以上面的问题就很好理解了,空白的块状行内元素基线默认为元素底端,其他几个元素的基线位于文本的底部,大家都参照基线进行了对齐。看似参差不齐,其实上还是对齐的,如下图。
你也可以直接查看demo
那么又延伸出另外的一个情况,当各元素之间的文本字体大小或者文本长度不一致时,基线的位置也会发生改变,页面会呈现更加的“混乱”状态,但实际上还是参照基线对齐的。如下图,
你也可以直接查看demo
下面就是解决办法:既然页面的混乱是因为“基线对齐”导致的,那只需要设置元素的垂直对齐不参照基线即可,引入vertical-align属性,设置元素的垂直对齐方式。
本例中,由于各元素高度相同,top、middle、bottom任选其一就可实现对齐。
将 vertical-align:top; 加入 .a{}样式即可,
你也可以直接查看demo
文章出处为:http://www.iyaxi.com/2017-07-03/1473.html
- inline-block元素上浮无法对齐的解决办法
- display:inline-block 浮动时,头部无法对齐解决办法
- 行内元素对齐:display-inline-block
- 行内元素对齐:display-inline-block
- 解决: 排列inline-block元素出现顶部不对齐的问题
- 关于display inline-block的对齐问题
- block元素和inline元素的区别
- 两个inline-block元素上下不对齐,出现错位
- inline-block对齐
- div里面的inline-block/inline内容两端对齐:
- 去除inline-block元素间的空隙
- inline-block元素的空白间距解决方法
- inline-block元素的空白间距解决方法
- inline-block元素间的间隙问题
- inline-block元素间的间隙问题
- 去除inline-block元素间的空隙
- 去除inline-block元素间距的方法
- inline-block元素间隙的解决方法
- UVA
- 【java】webservice客户端开发
- ios打电话、短信、邮件
- UVa12545 比特交换器 习题8-2
- Fibonacci 矩阵快速幂
- inline-block元素上浮无法对齐的解决办法
- hdu6109(并查集+启发式合并)
- 将xml字符串转换成map,list 的转换
- 秋招第一面
- 在OC中实现BOLL,RSI,WR算法
- 正则表达式匹配
- 【Oracle】日期类型理解
- CrossApp开发时, 存放在Resource下的文件在android环境下使用assets/..路径 使用C++的文件操作类如(fopen、ifstream等)找不到的问题
- (2017.8.14更新)CnCrypt加密U盘1.22,将U盘划分为普通盘和加密盘,支持与U盘启动盘共存