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

最新推荐文章于 2022-11-12 23:17:25 发布
VIP文章 最新推荐文章于 2022-11-12 23:17:25 发布
阅读量1.1k 收藏 3
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Andrew_SJ/article/details/119351390
版权

有这样一个需求：
要求将文字与icon作为一个盒子，盒子内文字与icon水平垂直居中，且盒子可以放在屏幕的任意位置：比如左侧或者右侧或者居中，且具有响应式的特点。
在这里插入图片描述
思路如下：
首先，用一个div包裹两个子div文字和icon。父盒子宽高已经指定，子盒子内其余属性设置好。

<div class="w-20 h-10 bg-blue-300 flex">
    <div class="text-base text-white">联系我们</div>
最低0.47元/天 解锁文章
Andrew_SJ
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 使用CSS属性，使Div上下左右移动指定像素
吕氏春秋i
08-10 3947
深入理解CSS定位中的偏移
【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐 带注释/总结
cc2855816075的博客
02-17 963
总结： 1、让元素上下对齐的方法： ①让图片上下对齐用vertical-align:cender; ②让其他元素上下对齐设置line-height与height一样。 2、CSS中设置颜色为==#fff时，而这个样式在JS中则是用字符串"rgb(255, 255, 255)"==存储的，我判断是否被选中就是判断边框颜色来筛选选中的图片的，代码如下： if(imgsDoms[i].style.borderColor == "rgb(0, 0, 0)"){ } 3、 /* ★★★这个b
html div图片定位,css将div定位到图片上的固定位置
weixin_35903223的博客
06-04 3659
如图我有个总的大div，宽度和高度都是不定的，里面的手机线框是背景图，用的background-size:contain定位的，黑框是我想要操作的div，想让他能覆盖手机模型的屏幕，而且放大缩小都会刚好限制在手机屏幕内，该怎么定位呢，能不能实现？谢邀，这种东西根本不需要啥背景图。写了个demo，点开看css代码和直接预览效果。https://jsfiddle.net/vpgL5535/我理解的话，...
大佬!请教一个关于div中图片位置问题?
liuji0517的博客
06-07 518
页面底部写了几行公司地址之类的文字，居中，打算把二维码也放上去，靠在这个居中的后面。摆放了半天图片位置还是没搞定。做背景位置只有topright，看起来最接近，但是跑到右上角了，而不是右中。资源代下载99dxz有朋友能提供点思路吗？ <divclass="footer"> <divclass="address"> <div>设为首页关于百度AboutBaidu百度推广使用百度前必读意见反馈帮助中心</div> <div...
未知图片大小在div里可以垂直居中显示
04-22
任意图片在div里的垂直居中！
ASP嵩嵩图片管理系统v5(相册源码).rar
07-06
《嵩嵩图片管理系统》简称＂SsPic＂，采用ASP ACCESS DIV CSS JS开发,可配置在支持ASP环境的任意主机。友好的系统操作界面，不需要专业的知识，即可熟练的使用，易学易用。功能完善，先进的批量上传技术，智能水印...
ASP嵩嵩图片管理系统V5.0
11-30
《嵩嵩图片管理系统》简称＂SsPic＂，采用ASP+ACCESS+DIV+CSS+JS开发,可配置在支持ASP环境的任意主机。友好的系统操作界面，不需要专业的知识，即可熟练的使用，易学易用。功能完善，先进的批量上传技术，智能水印...
嵩嵩图片管理系统 v2.0
10-18
图片自适应上下居中垂直居中显示 分类改为右边悬浮 增加图片文件夹样式 后台：admin_login.asp 帐号：admin 密码：admin 1.无需作任何修改，支持任意放在任意目录 2.批量上传图片，可一次上传多张图片，...
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
页面元素既可以添加背景颜色 也可以添加背景图片 只不过背景图片在背景颜色上方 即背景图片会压住背景颜色 （4）背景图片的位置 background-position: x y; ①参数是方位名词 top | center | bottom | left | ...
div中图片和文字在同一位置
xiaoxiao_xiaoliu的专栏
10-22 1334
hello
HTML5下DOM元素在窗口中拖动（更改位置）
热门推荐
ganyuanmen的博客
12-08 1万+
在非H5浏览器中，要想在窗口中靠鼠标移动DOM元素位置，需要在mousedown事件中记录鼠标和被拖动DOM的位置信息，在mousemove中呈现移动效果，然后在mouseup中改变最终位置。而在H5中省事了很多，利用dragable属性和drop事件很容易就做到
HTML学习笔记：让div在屏幕居中，图片在div里居中
howard2005的专栏
02-23 2591
目录 一、效果演示 二、实现方法 方法一：利用CSS实现 方法二：利用JavaScript实现 方法三：利用JavaScript实现 方法四：利用jQuery实现 一、效果演示 二、实现方法 方法一：利用CSS实现 <!DOCTYPE html> <html lang="en"> <head> <meta chars...
可编辑div中指定位置插入内容的方法
Leo的博客
07-15 3688
本文实例讲述了js实现在可编辑div中指定位置插入内容的方法，就像我们使用的编辑器一样，分享给大家供大家参考。具体实现方法如下：首先要让DIV启用编辑模式<div contenteditable=true id="divTest"></div>通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。 不扯话题了。下面说怎么获取或设置光标位置.2
实现div元素和文字水平及垂直居中的方法（超简单，适应各种场合）
qq_50737715的博客
11-12 7275
实现实现div元素和文字水平及垂直居中的方法如下： div元素水平居中：`style="margin:0 auto"` div元素垂直居中：`style="padding: (外层div的高-内层div的高)/2; background-clip:content-box; "` div文字水平居中：`外层div中style="text-align: center; "` div文字水平居中：`内层div中style="line-height: 外层div的高; "` 具体的代码展示（下面两种方法效果相同）
html/css使文字图片div在整个网页上居中（水平居中+垂直居中）transform属性配置
qq_47677800的博客
11-27 2671
在使用html/css编写网页时，有时需要让一段文字或图片等在整个网页居中，即既是水平居中又是垂直居中，而单单使用 text-align:center 只是让文字在水平上居中，而无法在垂直方向上也居中： <!DOCTYPE html> <head> <style> .word{ font-size: 50px; text-align: center; } </styl
实现图标Icon+文字在div里自动中心居中（水平垂直居中）
weixin_30692143的博客
02-12 1485
已知div行高设置text-align:center文字会自动居中。 通过:before来设置icon的地址和高宽。 需要设置图片默认的垂直居中条件，与文字一致，为text-bottom。 设置图片行级显示。 <!Doctype html><html><head><style>body{margin:0;padding:0;}.co...
如何设置图片、文字在容器（div）中垂直居中的显示？
China_Guanq的博客
01-06 3858
1、设置文字在div 容器中垂直居中显示 <div style="border: 1px #f00 solid;height: 200px;width: 60%;text-align: center;line-height: 200px;"> <span>文字垂直居中</span> </div>2、设置图片在div 容器中垂直居中显示 <div style="border: 1px #f0
p的文本如何垂直居中和水平居中在div
最新发布
06-10
要使 `<p>` 元素中的文本在 `<div>` 元素中水平和垂直居中，可以使用 CSS 的 flex 布局、position 和 transform 属性来实现。 1. 使用 flex 布局： ```css div { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100px; /* 设置 div 的高度 */ } p { margin: 0; /* 去除默认的上下边距 */ } ``` 在这个例子中，我们使用了 flex 布局，将 `<div>` 元素的 `display` 属性设置为 `flex`，并设置 `justify-content` 属性为 `center`，以使其内部的文本水平居中，同时设置 `align-items` 属性为 `center`，以使其内部的文本垂直居中。另外，我们还移除了 `<p>` 元素的默认上下边距，以使其更加紧凑。 2. 使用 position 和 transform 属性： ```css div { position: relative; height: 100px; /* 设置 div 的高度 */ } p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; /* 去除默认的上下边距 */ } ``` 在这个例子中，我们将 `<div>` 元素的 `position` 属性设置为 `relative`，以便内部的 `<p>` 元素可以使用 `absolute` 定位。然后，我们将 `<p>` 元素的 `position` 属性设置为 `absolute`，并将其 `top` 和 `left` 属性设置为 `50%`，以使其相对于 `<div>` 元素垂直和水平居中。最后，我们使用 `transform` 属性将其向上和向左移动半个 `<p>` 元素的高度和宽度，以使其准确地居中。另外，我们还移除了 `<p>` 元素的默认上下边距，以使其更加紧凑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值