图片和文字同时在一个div里

最新推荐文章于 2024-02-16 16:09:04 发布
最新推荐文章于 2024-02-16 16:09:04 发布
阅读量2.8k 收藏 8
点赞数 5
分类专栏： 学习笔记 文章标签： html css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29753121/article/details/104844768
版权

在一个div里面有文字也有图片的时候容易出现文字和图片中心点对不齐：这里的图片和文字就没对齐
我的解决方法是，对图片加上绝对定位

position:absolute;

父容器加相对定位position: relative;
如果出现图片和文字重合，就用

margin-left:-30px;

具体多少像素自己调整

我写的代码不会有bug
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
垂直居中一张图片和多行文字在固定的盒子内
Java小镇V
03-17 1606
HTML代码<div class="middle-box"> <img src="web.png"/> <i class="visible"></i> </div>CSS代码.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; } .middle-box
[随笔] 指定div内-让文字在图片上方且水平垂直居中
zhaoweihao的博客
12-24 754
需求 —— 在一个指定的div（cotainer）内，要实现： 图片撑满div 文字水平垂直居中 文字在图片上方 压缩时地下图片能等比例缩小 -> 可设置最小值 实现 —— 直接上代码： <div class="cotainer"> <img src="@/../static/img/img_manage_logoBg.png" alt="bg"> &lt...
CSS教程： CSS（上）
最新发布
weixin_31304499的博客
02-16 798
CSS(上) 什么是CSS Cascading StyleSheets简称层叠样式表 官方描述：用于描述用标记语言编写的文档的外观和格式。 虽然最常用于更改用HTML和XHTML编写的网页和用户界面的样式，但该语言可以应用于任何类型的XML文档，包括纯XML，SVG和XUL。 与HTML和JavaScript一起，CSS是大多数网站使用的基础技术，用于创建具有视觉吸引力的网页，W...
2021-07-08
weixin_54719836的博客
07-08 450
2021年最新Web前端面试题精选大全及答案 目录 HTML、CSS相关 Javascript相关 三者的异同 Vue相关 55.Vue路由懒加载（按需加载路由） React相关 react 生命周期函数 ******为什么虚拟 dom 会提高性能?(必考) (组件的)状态(state)和属性(props)之间有何不同 shouldComponentUpdate 是做什么的 react diff 原理 何为受控组件 调用 super(props) 的目的是什么 React 中构建组件的方式 小程序相关的 其
Web前端开发面试考点指南
YunWisdom
08-03 1384
Web 前端面试指南与高频考题解析指南 第一章 面试准备：简历编写和面试前准备 一般来说，跳槽找工作要经历投递简历、准备面试、面试和谈 offer 四个阶段。其中面试题目会因你的等级和职位而异，从入门级到专家级，广度和深度都会有所增加。不过，不管什么级别和职位，面试题目一般都可以分类为理论知识、算法、项目细节、技术视野、开放性题、工作案例等内容。接下来重点来说下简历和知识点梳理的方法。 准备一份合适的简历 首先，什么样子的简历更加容易拿到面试邀请？笔者作为一名在 BAT 中待...
CSS盒子模型AND浮动[附：常用工具ps]
世间万物皆代码[地球online]
11-13 802
课程目标: 熟练掌握CSS盒子模型 熟练掌握CSS浮动 盒子模型（CSS重点） 其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 看透网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ 牛奶是怎.
DIV+CSS 让同一行的图片和文字对齐
weixin_30551947的博客
12-18 840
在div+css布局中，如果一行(或一个DIV)内容中有图片和文字的话，图片和文字往往会一个在上一个在下，这是一个新手都会遇到问题，我的解决方法有三： 1.添加CSS属性：vertical-align:middle; 代码： <style> a img{border:none} .testdiv *{ vertical-align:middle; } </styl...
图片 和 包裹文字的div 在 同一个div中，只让图片水平居中
qq_46302247的博客
03-08 303
<view class="right_item"> <image src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/1917047079/O1CN019IechS22AEUVvswm5_!!0-item_pic.jpg_180x180.jpg_.webp"></image> <view>华为（huawei）荣耀6Plus 16G双4G版华为（huawei）荣耀6Plus 16G双4G版&lt.
[css] 怎么让div中的图片和文字同时上下居中？
歌谣的博客
02-09 1511
[css] 怎么让div中的图片和文字同时上下居中？ <div> <img src="./"/> <label>文字内容</label> </div> <style> img { vertical-align: middle; } </style> 给 img 设置 vertical-align: middle; 并且 vertical-align 只对行内元素，还有表格内的单元格有效，对块级元素的垂直
DIV+CSS图片和文字如何显示同一行
坚持是世界上每个有所建树的人共有的品质！
12-16 5012
如果把文字和图片放在同一个图层的，文字可以做到居中，但是图片就不能，因为图片默认是左上对齐的！如果你令到图片居中了，文字就会相对于图片右下对齐了！如果你想2个都居中的话，就不能把他们放在同一个div,或者你试下把他们放在2个div中，或者一个图片放div中，文字直接放页面中，不放div ,这样会给网页减瘦的！呵呵！ 　　补充下：文字居中的，只要用line-height就可以控制居中，图片居中的
在可编辑div中插入文字或图片解决思路与实现步骤
12-13
最近在网上碰到一个人问了我一个问题，在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用，基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能，我就特地看看了代码。 基本上编辑...
js+div实现文字滚动和图片切换效果代码
10-23
主要介绍了js+div实现文字滚动和图片切换效果代码,涉及javascript鼠标事件及页面元素图片滚动效果实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
文字环绕图片的布局效果(使用动态div实现)
12-12
（虽然感觉很2，没有哪个UI设计师会这样设计一个网页。但是觉得这种排版好有趣哦~） 答案就是，用动态div啦~ 把文字分成4块，环绕着图片。图片的大小和div的大小事先规定。再用js来计算每个div里显示多少文字。 这样...
CSS控制图片和文字在同一行显示且对齐的3种方法
09-25
当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢
DIV+CSS中让布局、背景图片、文字内容居中的方法
12-13
在DIV CSS布局的页面里，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的。 　1、首先介绍使用css属性让整体布局的居中： 　设置对象的父级内容居中，这里一个页面的为父级是什么呢？...
前端js常用剪贴板(复制粘贴)操作和应用，以及navigator.clipboard新粘贴板API使用
热门推荐
codingWeb的博客
12-28 1万+
最近的项目上需要做复制粘贴相关的操作，来总结下吧 复制、剪切、粘贴事件： copy 发生复制操作时触发; cut 发生剪切操作时触发; paste 发生粘贴操作时触发; 每个事件都有一个 before 事件对应：beforecopy、beforecut、beforepaste; 这几个 before 一般不怎么用，所以我们把注意力放在三个事件就可以了。 触发条件: 鼠标右键菜单的复制、粘贴、剪切; 使用了相应的键盘组合键，比如:ctrl+c、ctrl+v; 复制操作： copy事件使用示例： &lt
图片后接文字的css
goodyatou的专栏
01-29 1310
#tab2 h1         {             background: url('Images/ok.png') center no-repeat;             height: 37px;             line-height: 18px;             margin-left: -141px; margin-top:20px; paddin
html div图片文字混排,DIV+CSS教程：[3]CSS中如何实现图文混排
weixin_36147808的博客
06-07 1251
网页中有时也需要像word那样实现图文混排。那么如何通过CSS实现网页图文混排。用下面这段话做测试：“百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做"，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章，通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到...
Html中加入文字和图片
Dota_wy的博客
06-16 3882
TextView控件中的html语句中添加文字和图片 1、创建添加png/jpg必要的类 public class ImageGetterUtils { public static MyImageGetter getImageGetter(Context context, TextView textView) { MyImageGetter myImageGetter = new MyImageGetter(context, textView); return m
同一个box里图片div和文字div左右排列
06-03
你可以使用CSS的flexbox布局来实现图片div和文字div左右排列。具体实现方法如下： HTML代码： ``` <div class="box"> <div class="image"> </div> <div class="text"> <p>Your text goes here. </div> </...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值