css:两个行内块元素和图片垂直居中对齐

目录

两个行内块元素垂直居中对齐

先看一段代码:

html 复制代码
<style>
.box {
    width: 200px;
    height: 200px;
    line-height: 200px;
    font-size: 20px;
    text-align: center;
    display: inline-block;
    background-color: green;
  }
</style>

<div class="box"></div>
<div class="box">box</div>

显示效果

发现一个很奇怪的现象:我们本来期待的是两个框对齐,表现却是错位的

原因是:

一个inline-block元素,如果里面没有inline内联元素,或者overflow不是visible,则该元素的基线就是其margin底边缘,否则,其基线就是元素里面最后一行内联元素的基线。

所以第一个框的底部和后一个元素中的文字基线对齐了,

如果两个元素都有文本,则是对齐的

如果两个元素都没有文本,同样是对齐的

尝试增加对齐属性

css 复制代码
.middle {
  vertical-align: middle;
}

在第一个元素上增加

html 复制代码
<div class="box middle"></div>
<div class="box">box</div>

发现还是没有对齐,还是有一点点错位

尝试在第二个元素上增加

html 复制代码
<div class="box"></div>
<div class="box middle">box</div>

发现并没有居中对齐,有种失效的感觉

解决办法

让第一个盒子对齐方式改为顶部或底部对齐

css 复制代码
.top {
  vertical-align: top;
}
html 复制代码
<div class="box top"></div>
<div class="box">box</div>

表现如下

图片垂直居中问题

html 复制代码
<style>
.box {
   background-color: green;
 }
</style>

<div class="box">
 <img class="image" src="./mm.jpg" alt="" />
</div>

图片没有居中显示,底部多出了一个间隙

实现图片垂直居中对齐

方案一:修改图片元素为块级元素

css 复制代码
.image {
  display: block; 
}

方案二:图片元素居中对齐

css 复制代码
.image {
  vertical-align: middle;
}

方案三:父级元素行高改为0

css 复制代码
.box {
    line-height: 0;
}

方案四:父级元素字体大小改为0

css 复制代码
.box {
    font-size: 0;
}

图片和文字垂直居中对齐

一个很常见的需求,用户头像和用户名并排显示

html 复制代码
<style>
  .box {
    background-color: green;
  }

  .image {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    object-fit: cover;
  }

  .text {
    background-color: red;
    color: #fff;
  }
</style>

<div class="box">
  <img class="image" src="./mm.jpg" alt="" />
  <span class="text">我是一段文字</span>
</div>

可以看到,默认情况下并没有实现垂直居中对齐

改造如下

html 复制代码
<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;
 }
</style>

<div class="box">
 <img class="image" src="./mm.jpg" alt="" />
 <span class="text">我是一段文字</span>
</div>

实现效果如下

参考文章

  1. CSS深入理解vertical-align和line-height的基友关系
相关推荐
爱分享的程序员17 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘22 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出24 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的24 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解27 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵30 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im31 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man31 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构