行内元素对齐：display:inline-block

fou7 发布于2019-08-28 17:59 / 1090人阅读

摘要：问题描述两个属性都是但是一个有内容一个没有内容为什么会出现高低不平的现象看效果解决方法是给元素添加造成原因是内的元素基线变了

问题描述

两个div属性都是display：inline-block;但是一个有内容一个没有内容为什么会出现高低不平的现象？
看效果~

.div-3, .div-4 {
    display: inline-block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    background: #003366;
    text-align: center;

}
.div-3 a, .div-4 a {
    color: #fff;
}

div-2

.div-1, .div-2 {
    display: inline-block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    background: #003366;
    text-align: center;
    vertical-align: top;
}
.div-1 a, .div-2 a {
    color: #fff;
}

div-1 div-2

解决方法是给inline-block元素添加vertical-align:middle or top or bottom

造成原因是inline-block内的元素基线变了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110937.html

Vertical-Align，你应该知道的一切

摘要：而行内块元素，顾名思义，就是位于行内的块元素。红线表示行高的顶边和底边，绿线表示字体高度，蓝线表示基线。红线表示外边距的边界，黄色是边框，绿色的内边距，蓝色是内容区，蓝线是每个行内块元素的基线。现在，我们已经知道了对齐相关的一切要素。好，我们聊聊vertical-align。这个属性主要目的用于将相邻的文本与元素对齐。而实际上，verticle-algin可以在不同上下文中灵活地对齐...

Lycheeee 2019-08-29 18:38 评论0 收藏0
前端面试重点之--居中问题

摘要：前端面试重点居中问题在页面布局开发中，居中问题是我们经常碰到的问题，掌握居中问题对于解决页面布局非常重要，同时它也是常见的面试重点。已知宽高的元素父元素相对定位，子元素绝对定位。以上才支持的兼容性写法完前端面试重点——居中问题在页面布局开发中，居中问题是我们经常碰到的问题，掌握居中问题对于解决页面布局非常重要，同时它也是常见的面试重点。本文汇总一些常见的居中方式以及一些注意点，权当...

AJie 2019-08-02 15:31 评论0 收藏0
前端面试重点之--居中问题

摘要：前端面试重点居中问题在页面布局开发中，居中问题是我们经常碰到的问题，掌握居中问题对于解决页面布局非常重要，同时它也是常见的面试重点。已知宽高的元素父元素相对定位，子元素绝对定位。以上才支持的兼容性写法完前端面试重点——居中问题在页面布局开发中，居中问题是我们经常碰到的问题，掌握居中问题对于解决页面布局非常重要，同时它也是常见的面试重点。本文汇总一些常见的居中方式以及一些注意点，权当...

张迁 2019-08-30 11:23 评论0 收藏0
BFC，包含块，文档流，浮动，定位是个啥关系---CSS视觉格式化模型

摘要：视觉格式化模型浏览器在解析渲染我们所写的内容，顺序渲染普通文档流。渲染结果如下图这儿有一个知识点文档流按我的理解就是在浏览器渲染显示的一个模式，这个模式的特点自上而下，从左到右排列规则。如果不特殊指定，浏览器会默认当前的渲染是按文档流模式。 CSS视觉格式化模型浏览器在解析渲染我们所写的html内容，顺序渲染（普通文档流）。 1 2 3 4 ...

huashiou 2019-08-30 15:55 评论0 收藏0