css用flex实现字体垂直居中对齐

实现前

可以看出字体与图片并未垂直居中

实现也很简单只需要在父元素中添加

display: flex;（让字体与图片水平排布，并且定义了为flex布局）

flex-flow: column;（让字体与图片垂直排布）

align-items: center;（让字体与图片居中排布）

即可实现

实现后

<div class="container2"><div class="container2-top"><h3>我的常用</h3><span>&gt;</span><span>展开全部</span></div><div class="container2-center"><div><img src="img/组 19@2x(3).png" alt=""><div>直播课程</div></div><div><img src="img/组 20@2x.png" alt=""><div>离线课程</div></div><div><img src="img/组 19@2x.png" alt=""><div>家长监管</div></div><div><img src="img/组 19@2x(1).png" alt=""><div>在线解题</div></div><div><img src="img/组 19@2x(2).png" alt=""><div>签到福利</div></div></div><div class="container2-bottom"><div><img src="img/5004283@2x.png" alt=""><div>直播教育·七年级英语</div></div><div><img src="img/m5037851@2x.png" alt=""><div>初中数学进阶套装集</div></div></div>

   .container2 {position: absolute;width: 94.9333vw;height: 58.9333vw;background: #FFFFFF;border-radius: 2.6667vw;left: 3vw;top: 18vw;.container2-top {padding-top: 3.7333vw;h3 {display: inline-block;color: #333333;margin-left: 4.5333vw;}span {&:nth-child(2) {float: right;color: #808080;margin-right: 3.2vw;margin-top: -1vw;}}span {&:nth-child(3) {float: right;color: #808080;font-size: 3.7333vw;margin-right: 2vw;}}}.container2-center {display: flex;justify-content: space-around;div {display: flex;flex-flow: column;align-items: center;img {width: 9.0667vw;height: 9.0667vw;}div {margin-top: 2vw;color: #333333;font-size: 2.9333vw;}}}.container2-bottom {display: flex;justify-content: space-around;div {display: flex;flex-flow: column;align-items: center;img {width: 41.8667vw;height: 21.3333vw;border-radius: 1.3333vw;}div {margin-top: 1.6667vw;font-size: 3.4667vw;color: #333333;}}}}

css用flex实现字体垂直居中对齐相关推荐

[css] 不同大小的字体底部对齐
不同font-size的字体会出现上下偏差, display: flex;align-items: baseline; 解决方案 align-items属性定义项目在交叉轴上如何对齐. .box {a ...
css图片如何垂直居中对齐,css怎样让图片和文字垂直居中对齐
css怎样让图片和文字垂直居中对齐发布时间:2020-11-16 10:10:53 来源:亿速云阅读:99 作者:小新这篇文章主要介绍css怎样让图片和文字垂直居中对齐,文中介绍的非常详细,具有 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
CSS 系列七高级技巧篇精灵图、字体图标、CSS三角、图片和文字对齐以及bug 、溢出文字省略号、CSS 初始化、常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
flex vue 垂直居中居上_图片水平垂直居中对齐的四种做法
在前端开发制作中,图片垂直居中对齐是很常见的,有些是固定高度,有些没有固定高度,本文分享我用的四种方法,希望对你有所启发. 以下说的做法暂不考虑IE浏览器的兼容性,适用于移动端,对兼容性感兴趣的可以看 ...
利用vertical-align实现图片文字垂直居中对齐（HTML、CSS）
利用vertical-align实现图片文字垂直居中对齐(HTML.CSS) <!DOCTYPE html> <html lang="en"><hea ...
CSS让同一行的图片和文字垂直居中对齐
有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:mid ...
css表格怎么垂直居中对齐,css表格垂直居中怎么设置？
css设置表格垂直居中的方法:1.在表格外面嵌套一层table,用table中的td来控制居中.2.将表格放在div标签中,通过为div设置css样式display:table-cell实现垂直居中. ...
html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...

css用flex实现字体垂直居中对齐

css用flex实现字体垂直居中对齐相关推荐

最新文章

热门文章