页面要达到的样子

中间写的是时候是向div里面放一张图片就行了

<head>

    <link rel="stylesheet" href="reset.css">

    <style>

        div#footer_ensure {

            /* margin: 24px 0px;  */

            /* text-align: center; */

            background-color: red;/* 为了演示加一个红色背景 */

        }

        img {

            /* vertical-align: middle; */

            /* width: 198px; */

            height: 198px;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <div id="footer_ensure">

        <img src="data:image/site/ensure.png">

    </div>

</body>

但是写好之后...是这样的,

它下面有一条红边,

图片高度为 height(198)+border(1)*2 = 200px

div#footer_ensure的高度由image撑开,应该也为200px,

但是它实际的盒模型高度为201.6px...这就导致下面有一条边

暂时解决办法是:

方法1:直接写死 div#footer_ensure 的高度为200px  但是img会溢出

方法2:img加一个样式 vertical-align: middle; 会自动水平对齐, img下面的边就没有了,div#footer_ensure 的高度也就跟着变为200px

方法3:img浮动

图片放在div中低下会出现一条缝的更多相关文章

  1. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  2. CSS-布局【1】-图片在div中垂直居中

    方法一:通过增加100%高度行内块居中对齐 <!DOCTYPE html> <html> <head> <meta name="viewport&q ...

  3. 让图片在div 中居中的方法

    方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...

  4. html 图片在一个div中放大缩小效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. 让一个图片在div中居中（四种方法）

    第一种方法: <div class="title"> <div class="flag"></div> <div cl ...

  6. 让图片在DIV中垂直居中

    window.onload=function(){ var img = document.getElementById("imgdiv"); var div = document. ...

  7. 让图片在div中居中

    详情看:https://www.cnblogs.com/yyh1/p/5999152.html

  8. 使用CSS设置背景图片，图片比较大，完全显示在一个DIV中

    做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...

  9. 图片在DIV里边水平垂直居中

    图片在一个DIV中要垂直水平居中,首先定义一个DIV .wrap{ width: 600px; height: 400px; border: 1px #000 solid; } 插入图片 <di ...

随机推荐

  1. 纯css 实现动画的暂停和运动

    <template>   <div>     <input id="stop" type="radio" name="p ...

  2. canvas 隐藏 踩坑

    当我在把canvas绘制完成时,要把canvas隐藏起来.试了display 和  opacity 都不行. 然后我用了 position: absolute; left:1000px; top:0; ...

  3. 计算机系统5-> 计组与体系结构2 | MIPS指令集（上）| 指令系统

    系列的上一篇计算机系统4-> 计组与体系结构1 | 基础概念与系统评估,学习了一些计算机的基础概念,将一些基本的计算机组成部分的功能和相互联系了解了一下,其中很重要的一个抽象思想就是软硬件的接口 ...

  4. python基础练习题（题目 对10个数进行排序）

    day24 --------------------------------------------------------------- 实例037:排序 题目 对10个数进行排序. 分析:先输入1 ...

  5. css兼容问题集锦

    BEGIN; 1.文本框很大,导致里面的内容不居中.以及内容为数字时,不支持text-indent属性 解:line-height: K px; (值为文本框的height值). 2.文本框有背景图片 ...

  6. 项目完成 - 基于Django3.x版本 - 开发部署小结

    前言 最近因为政企部门的工作失误,导致我们的项目差点挂掉,客户意见很大,然后我们只能被动进入007加班状态,忙得嗷嗷叫,直到今天才勉强把项目改完交付,是时候写一个小结. 技术 因为前期需求不明确,数据 ...

  7. synchronized锁及其锁升级

    点赞再看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 文章不定期同步公众号,还有各种一线大厂面试原题.我的学习系列笔记. 多线程加锁有两种方式 利用Sychronized关键字 利用Lock接口 ...

  8. LVM从VG中删除PV及删除未知PV

    当我们的硬盘发被删除掉了,我们的PV卷会变成[unknown] 一.首先我们要备份我们的文件,然后再删除lv分区 二. VG中去除PV unknown device:

  9. 基础学习：社会工程学---利用Kali下的setoolkit进行钓鱼网站制作

    利用Kali下的setoolkit进行钓鱼网站制作 1.打开kali2019,输入setoolkit,打开setoolkit模块 2.输入命令1,进入钓鱼攻击页面 3.输入命令2,进入web钓鱼攻击页 ...

  10. Atlassian应对CVE-2022-22963，CVE-2022-22965的常见问题

    CVE-2022-22965 常见问题解答 基本信息 已发现 Spring Framework 中的关键远程代码执行漏洞 CVE-2022-22965.根据 Spring 的安全公告,此漏洞会影响在 ...