培训网站建设多少钱,电子设计大赛网站开发,建站技术入门,wordpress增加互动目录 两个行内块元素垂直居中对齐图片垂直居中问题图片和文字垂直居中对齐参考文章 两个行内块元素垂直居中对齐
先看一段代码#xff1a;
style
.box {width: 200px;height: 200px;line-height: 200px;font-size: 20px;text-align: center;display: inline-block;b… 目录 两个行内块元素垂直居中对齐图片垂直居中问题图片和文字垂直居中对齐参考文章 两个行内块元素垂直居中对齐
先看一段代码
style
.box {width: 200px;height: 200px;line-height: 200px;font-size: 20px;text-align: center;display: inline-block;background-color: green;}
/stylediv classbox/div
div classboxbox/div显示效果 发现一个很奇怪的现象我们本来期待的是两个框对齐表现却是错位的 原因是 一个inline-block元素如果里面没有inline内联元素或者overflow不是visible则该元素的基线就是其margin底边缘否则其基线就是元素里面最后一行内联元素的基线。 所以第一个框的底部和后一个元素中的文字基线对齐了
如果两个元素都有文本则是对齐的 如果两个元素都没有文本同样是对齐的 尝试增加对齐属性
.middle {vertical-align: middle;
}在第一个元素上增加
div classbox middle/div
div classboxbox/div发现还是没有对齐,还是有一点点错位 尝试在第二个元素上增加
div classbox/div
div classbox middlebox/div发现并没有居中对齐有种失效的感觉 解决办法
让第一个盒子对齐方式改为顶部或底部对齐
.top {vertical-align: top;
}div classbox top/div
div classboxbox/div表现如下
图片垂直居中问题
style
.box {background-color: green;}
/stylediv classboximg classimage src./mm.jpg alt /
/div图片没有居中显示底部多出了一个间隙 实现图片垂直居中对齐
方案一修改图片元素为块级元素
.image {display: block;
}方案二图片元素居中对齐
.image {vertical-align: middle;
}方案三父级元素行高改为0
.box {line-height: 0;
}方案四父级元素字体大小改为0
.box {font-size: 0;
} 图片和文字垂直居中对齐
一个很常见的需求用户头像和用户名并排显示
style.box {background-color: green;}.image {border-radius: 50%;width: 30px;height: 30px;object-fit: cover;}.text {background-color: red;color: #fff;}
/stylediv classboximg classimage src./mm.jpg alt /span classtext我是一段文字/span
/div可以看到默认情况下并没有实现垂直居中对齐
改造如下
style.box {background-color: green;}.image {vertical-align: middle;border-radius: 50%;width: 30px;height: 30px;object-fit: cover;}.text {background-color: red;color: #fff;font-size: 12px;vertical-align: middle;}
/stylediv classboximg classimage src./mm.jpg alt /span classtext我是一段文字/span
/div实现效果如下
参考文章
CSS深入理解vertical-align和line-height的基友关系
