inline-block元素上浮无法对齐的解决办法

2017-7-3 12:01 来自本站原创 18,631 2 2
[摘要]

有时,我们将元素设置display:inline-block;属性后并没有实现预期的横排对齐,而是出现部分元素上浮导致布局变得参差不齐,我们需要设置垂直对齐来解决这个问题。

不得不说display:inline-block;是一个强大的css属性,它解决了很多float浮动布局的不足,让页面布局更随意、富有弹性。但这个改变了元素类型的属性也存在着很多容易让人忽视的小问题,如之前我有写过的《li标签间有空白是怎么回事? 消除li横排后空隙》,我们姑且称之为“bug”吧(实则不然),只有我们掌握了这些问题的解决办法,才能更加熟练的使用这一布局神器。

inline-block元素上浮无法对齐的解决办法

笔者这次遇到的一个问题场景是元素设置为display:inline-block;后,部分元素出现了上浮,无法与其他同行元素水平对齐。

部分代码如下:

<div class="wrap">
 <div class="a">yaxi.net</div>
 <div class="a">雅兮网</div>
 <div class="a">yaxi.net</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>设置为块状行内元素,让他们水平对齐以达到如下图效果。

inline-block元素上浮无法对齐的解决办法

当四个块状元素内都写有文本的时候,实现了预期的效果;但当其中一个块状元素无内容填充时,出现了异常,该空白元素出现了上浮,导致整个页面变得参差不齐了,如下图,为什么会这样呢?

inline-block元素上浮无法对齐的解决办法

重点来了(敲黑板!!!)行内元素和替换元素(如<input><textarea>等)会有一个叫做基线(baseline)的玩意,他的位置位于文本框的底部,即文字的最底端;当块状行内元素无文本填充的时候,它的基线就会自动移至元素的最底端;同时,图片以及其他非替换元素的基线也为元素的最底端。

总结起来就是,行内元素和替换元素的基线位于文本框的底端,无文本的块状行内元素、图片和非替换元素的基线就是元素的最底端。大家横向对齐的参照物默认就是这个基线(baseline)

所以上面的问题就很好理解了,空白的块状行内元素基线默认为元素底端,其他几个元素的基线位于文本的底部,大家都参照基线进行了对齐。看似参差不齐,其实上还是对齐的,如下图。

你也可以直接查看demo

inline-block元素上浮无法对齐的解决办法

那么又延伸出另外的一个情况,当各元素之间的文本字体大小或者文本长度不一致时,基线的位置也会发生改变,页面会呈现更加的“混乱”状态,但实际上还是参照基线对齐的。如下图,

你也可以直接查看demo

inline-block元素上浮无法对齐的解决办法

下面就是解决办法:既然页面的混乱是因为“基线对齐”导致的,那只需要设置元素的垂直对齐不参照基线即可,引入vertical-align属性,设置元素的垂直对齐方式。

inline-block元素上浮无法对齐的解决办法

本例中,由于各元素高度相同,top、middle、bottom任选其一就可实现对齐。

将 vertical-align:top; 加入 .a{}样式即可,

你也可以直接查看demo

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:2   其中:访客  2   博主  0
    加载中...
    1. 1年前 (2017-07-04) 椅子

      我都是浮动后在清除浮动 cs3还没有深入研究过

    2. 1年前 (2017-07-03) 沙发

      原来是这么一回事,不过平时我比较喜欢使用middle对齐

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    2 2 18,631
    Top