margin-bottom解决图片文字不对齐…

最新推荐文章于 2022-11-25 18:53:39 发布
最新推荐文章于 2022-11-25 18:53:39 发布
阅读量230 收藏
点赞数
分类专栏： Html~
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guofei886/article/details/12834245
版权
        我们在做网页的时候，会遇到一个图片和文字位置对不齐的问题。(一般表现为图片总是比文字高点)，如下图，"我的联系方式"是文字，后面的email是图片：

文字和图片没有对齐

 

解决问题最好的办法：

     一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来，做法是把这个值设置为负数。例如我们高度为22像素的图片设置它的style="margin-bottom: -4px" 这样文字和图片就居中了。这个值随着图片的大小不同而改变，具体的大家测试一下就知道了。下面是我更改后的效果：

文字和图片对齐了

guofei886
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
单行图片文字垂直居中问题——实战
12-08
使用表格的方法来表现设计效果 <style type="text/css"> <!– body{ font-size:12px;... margin-bottom:2px; } td{ height:23px; line-height:23px; padding:0 3px; } .name{ fo
网页设计：Css大坑之一，设置margin无效
热门推荐
qq_44131760的博客
03-07 1万+
出现这个问题基本和垂直外边距的特性有关。注意是垂直外边距margin-top/bottom啊，不是水平外边距。 垂直外边距特性： 1.兄弟盒子的垂直外边距会重合，取兄弟元素设置的margin属性最大值。比如上面的盒子设置margin-bottom:200px，下面盒子设置margin-top:100px，那最终两个盒子隔开距离是200px。 2.父子盒子的垂直外边距会传递，在一定的条件下，由子元素margin-top属性会单方向传递给父元素的margin-top属性。 下面会进行实验，看看margin具体是
html中图标与文本底部不对齐的解决方式
weixin_45172119的博客
06-16 1325
html中图标与文本底部不对齐的解决方式 文字旁边搭配图片时，发现图片比文字靠上，这是因为我们文本都是默认以基线对齐的，图片可以看作是一种特殊的文本，要是底部对齐，我们只要修改对齐方式就可以了。 设置各对象的vertical-align属性，属性说明： baseline－将支持valign特性的对象的内容与基线对齐 sub－垂直对齐文本的下标 super－垂直对齐文本的上标 top－将支持valign特性的对象的内容与对象顶端对齐 text-top－将支持valign特性的对象的文本与对象顶端对齐 mid
margin-bottom解决图片文字对不齐的问题
我们仨
07-20 728
文章来源：https://blog.csdn.net/ChaoYang0502/article/details/3007017 我们在做网页的时候，有时会遇到图片和文字位置对不齐的问题。(一般表现为图片总是比文字高点)，如下图所示： 解决这个问题最好的办法： 需要用到一个关键的属性：margin-bottom，通过修改图片的外边框的底部高度就可以让文字移动上来，做法是把这个值设置为负数。...
CSS之left:50% 、 margin-left: 50%写法的bug和解决
tuzi007a的博客
07-14 2425
大家好，我是梅巴哥er。本篇一起来看一个关于left: 50%; 和 margin-left: 50%;写法产生的bug和解决方法。 产品需求 我们需要一个居中的盒子，底色是蓝色，水平居中放置，宽度随着字数做自适应调整。 发现bug 于是，我们就根据需求，来写这样一段代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
【问题处理笔记】在CSS中span标签设置padding-top/bottom以及margin-top/bottom无效的解决方法
野臻
12-23 7807
在CSS中span标签设置padding-top/bottom以及margin-top/bottom无效的解决方法
【文字和图片居中对齐】图片和文字垂直居中对齐，span使用margin和line-height不生效解决办法
seeeeeeeeeee的博客
05-07 1553
图片展示 问题： 今天遇到的问题，我需要一行展示一堆的图片，中间穿插#号，那我就直接一个img标签一个span标签了，直接就排在了一起，非常简单。然后需求是井号要在图片的中间。我就直接加了个行高，发现没生效，然后又试了一下margin-bottom，准备给他顶上去，也不生效。又想到span是行内元素，我就加了inline-block，但是还是都不生效。 后来发现这样写可以生效。 代码 html部分 <div class="liaokuangbox"> <img
Margin的深入了解
liulei21的专栏
08-23 1779
关于margin对于一个前端开发者是非常常见的一个CSS属性，而我今天所分享margin属性是为了更加深入的了解margin的一些特性，从而在实际应用中，减少代码量。主要内容如下： 1.关于margin的百分比特性。 2.关于margin的auto的作用机制。 3.关于margin的重叠。 4.关于margin的负值。 一、margin的百分比特性。 我们使用百分比时经常会忽略这个问题...
margin负值的理解与演示
weixin_43183219的博客
01-06 1002
margin负值的介绍以及一些简单的演示
vue el-upload实现图片和文字上传
lemon今天学习了吗？的博客
11-25 4909
slot="file" slot-scope="{ file }" 自定义插槽，可以在里面实现输入框。:file-list="imageList" 图片都存到的自定义 imageList 数组。:before-remove="() => false" 防止按下删除键图片和文字被删除。:before-upload="beforeAvatarUpload" 上传时的校验回调。:action="fileUrl" 调用接口自定义的fileUrl上传图片到的服务路径。
关于margin重叠的一些理解
lianglizhongblog
03-17 5895
当用margin进行页面布局时，有时会出现margin-top/margin-bottom没有效果的情况或者说没有按照我们“原以为”的效果，在查找BUG时，我们往往却没有意识或者了解到这其实是因为margin出现了重叠的原因： 一、相邻元素margin重叠： 效果： 如果按照我们的原来的“设想”，两个段落之间的距离应该是2em，但是效果却显示的是1em，这是因为第一段的mar
SuperButton-这真的可能是最好用的按钮了.zip
09-23
drawable_bottom="@mipmap/icon_like"图标距文字距离app:drawable_padding="20dp"根据文字大小缩放图标，默认为true,当为false时显示原图标大小app:drawable_auto="true"按钮支持的所有属性<?xml version="1.0...
html 内联元素和html 块级元素概述及区别
12-13
•宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小; 块级元素主要有： 复制代码代码如下: ...
漂亮的后台界面模板框架
11-30
margin-bottom: 0; margin-left: auto; background-repeat: repeat-x; } #top h2{ width:150px; height:24px; float:left; font-size:12px; text-align:center; line-height:20px; color:#0066FF; font-...
android手机应用源码Imsdroid语音视频通话源码.rar
最新发布
05-20
android手机应用源码Imsdroid语音视频通话源码.rar
营销计划汇报PPT，市场品牌 推广渠道 产品 营销策略tbb.pptx
05-20
营销计划汇报PPT，市场品牌 推广渠道 产品 营销策略tbb.pptx
JavaScript_超过100种语言的纯Javascript OCR.zip
05-20
JavaScript
JavaScript_跨平台React UI包.zip
05-20
JavaScript
html图片置于文字下方
05-31
要将图片置于文字下方，可以使用以下的HTML和CSS代码： ... <img src="your-image-url" alt="your-image-description"> ...通过设置图片的margin-bottom属性，可以将图片下方留出一些空间，以使文本更易于阅读。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值