页面要达到的样子

中间写的是时候是向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. partTwo自动出题程序

    需求介绍 一家软件公司程序员二柱的小孩上了小学二年级,老师让家长每天出30道四则运算题目给小学生做. 二柱立马就想到写一个小程序来做这件事. 这个事情可以用很多语言或者工具来实现: Excel, C/ ...

  2. oracle split 以及 简单json解析存储过程

    BEGIN; 由于之前工作上需要在oracle中做split功能以及json格分解.然后经过一番google和优化整合,最后整理到一个存储过程包中,易于管理,代码如下: 1.包定义: CREATE O ...

  3. 在jupyterlab中实现实时协同功能

    1 简介 当你在使用jupyter时,有没有想象过如果我们可以把正在编写代码的jupyter界面共享给其他人,使得别人可以在其他地方实时看到与你同步的jupyter界面,这样一来无论是与他人沟通代码逻 ...

  4. Unity实现A*寻路算法学习2.0

    二叉树存储路径节点 1.0中虽然实现了寻路的算法,但是使用List<>来保存节点性能并不够强 寻路算法学习1.0在这里:https://www.cnblogs.com/AlphaIcaru ...

  5. FreeRTOS --（10）任务管理之任务延时

    转载自 https://blog.csdn.net/zhoutaopower/article/details/107101723 在<FreeRTOS --(7)任务管理之入门篇>中讲过, ...

  6. LintCode-165 · 合并两个排序链表-题解

    描述:将两个排序(升序)链表合并为一个新的升序排序链表样例 1:输入: list1 = null, list2 = 0->3->3->null输出: 0->3->3-&g ...

  7. 团队Beta2

    队名:观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 **过去两天完成了哪些任务 ** 文字/口头描述 学习 展示GitHub当日代码/文档签入记录 接下来的计划 完成短租车,页面美化 **还 ...

  8. 小白必看：零基础安装Linux系统（超级详细）

    我们以最新发布的CentOS 8.1为例,学习下如何安装Linux系统 准备工作: 1.一台可以访问互联网的电脑 2.VMware Workstation安装包 3.CentOS8.1镜像(CentO ...

  9. Oracle 19c单实例部署

    目录 Oracle 19c单实例部署: 1.配置yum: 2.安装rpm包: 3.设置hostname: 4.配置hostname解析: 5.配置时钟同步服务(ntp): 6.检查及配置内核参数: 7 ...

  10. K8S面试应知必回

    目录 面试不要不懂装懂,不会就是不会,不可能每个人都接触过所有的知识! 1. 基础问题 1.1 Service是怎么关联Pod的?(课程Service章节) 1.2 HPA V1 V2的区别 1.3 ...