div内图片和文字水平垂直居中且在屏幕任意位置

有这样一个需求：
要求将文字与icon作为一个盒子，盒子内文字与icon水平垂直居中，且盒子可以放在屏幕的任意位置：比如左侧或者右侧或者居中，且具有响应式的特点。

思路如下：
首先，用一个div包裹两个子div文字和icon。父盒子宽高已经指定，子盒子内其余属性设置好。

<div class="w-20 h-10 bg-blue-300 flex"><div class="text-base text-white">联系我们</div><img src="./img/Lime250.png" alt="" class="w-4 h-4">
</div>

使用flex的justify-content: center 和 align-content: center属性来分别做水平和垂直定位。

    <div class="w-40 h-10 bg-blue-300 flex justify-center items-center"><div class="text-base text-white">联系我们</div><img src="./img/Lime250.png" alt="" class="w-4 h-4"></div>

如果要使父盒子显示在页面左中右，可以使用一个div将父盒子包裹，再使用flex布局的justify-content属性。

<div class="flex justify-end"><div class="w-40 h-10 bg-blue-300 flex justify-center items-center"><div class="text-base text-white">联系我们</div><img src="./img/Lime250.png" alt="" class="w-4 h-4"></div>
</div>

div内图片和文字水平垂直居中且在屏幕任意位置相关推荐

div内图片和文字水平垂直居中
大小不固定的图片.多行文字的水平垂直居中本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实 ...
div 内图片垂直居中
vertical-align属性适用于 line-block: <div class="title"><img src="img_p1_title.pn ...
微信小程序图片文字水平垂直居中对齐
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序图片文字水平垂直居中对齐要实现水平垂直居中可使用如下方案给父元素设置 .td {dis ...
html字居右垂直设置,css文字水平垂直居中怎么设置？
css文字水平垂直居中怎么设置?下面本篇文章就来给大家介绍使用CSS设置文字水平居中和垂直居中的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.文字水平居中在CSS中想要 ...
html字体如何设置垂直居中显示,css文字水平垂直居中怎么设置？
css文字水平垂直居中怎么设置?下面本篇文章就来给大家介绍使用CSS设置文字水平居中和垂直居中的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.文字水平居中在CSS中想要 ...
一个高度不固定的div，里面的文字如何垂直居中？
一个高度不固定的div,里面的文字如何垂直居中? 最近在做项目中遇到父元素高度不固定,但是Dom元素里面的文本内容需要上下居中显示,解决方案: 一.针对弹性布局的盒子: 垂直居中: align-ite ...
vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
写在前面:这是纯前端导出,导出的表格是二级表头,内容是四级单元格(单元格内有四小格),这几个点学会之后应该能适应大部分导出excel的需求了.本次功能记录真实有效.对于之前没接触过导出excel需求的 ...
设置图片和文字的垂直居中
设置图片和文字的垂直居中.vertical-align:middle;图片竖向居中,然后文字就可以和图片对齐.
div水平垂直居中 div相对于父元素水平垂直居中 div相对于网页水平垂直居中
div相对于父元素水平垂直居中(相对网页水平垂直居中在下面) 弹性布局父元素作为容器设置宽高.弹性布局.水平轴和交叉轴居中 display:flex; justify-content:center; ...

div内图片和文字水平垂直居中且在屏幕任意位置

div内图片和文字水平垂直居中且在屏幕任意位置相关推荐

最新文章

热门文章