页面要达到的样子

中间写的是时候是向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. ICO图标在线生成转换网站

    ico是Icon file的缩写,是Windows的图标文件格式的一种,可以存储单个图案.多尺寸.多色板的图标文件. 在Windows操作系统中,单个图标的文件名后缀是.ICO.这种格式的图标可以在W ...

  2. python学习-Day9

    目录 记忆不清点回顾 今日概要 今日内容 大作业讲解 字符编码实际应用 编码与解码 如何解决乱码的问题 文件操作简介 什么是文件 代码操作文件 代码操作文件的流程 基本语法结构 使用关键字打开文件 w ...

  3. 斯坦福NLP课程 | 第2讲 - 词向量进阶

    作者:韩信子@ShowMeAI,路遥@ShowMeAI,奇异果@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/36 本文地址:http://www. ...

  4. mysql中的date、datetime、timestamp你还不知道怎么使用吗

    在后端开发中经常会碰到涉及数据库的场景,不知道屏幕前的你有这样的疑惑没有,每每在遇到时间.日期字段总是让人头疼,分不清到底是选date还是datetime,亦或是timestamp,真是抓耳挠腮啊,怎 ...

  5. Prometheus监控实战应用

    目录 1.Prometheus的主要特征及概述 2.普罗米修斯原理架构图 3.下载安装启动Prometheus 4.web客户端操作 5.默认图像 6.目录解释 7.配置文件 8.监控指标 8.1.监 ...

  6. 等了整整12年！Linux QQ昨天终于更新了！

    一个执着于技术的公众号 前言 2020年4月1日,腾讯QQ Linux版迎来最新版发布,详细版本号为v2.0.0 Beta2.上一个版本v2.3.2发布于2019年10月24日,时隔160天又迎来了更 ...

  7. Git 使用心得 & 常见问题整理

    开源Linux 回复"读书",挑选书籍资料~ Git 流程图 Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remot ...

  8. Docker中Nginx，部署Tomcat，部署es + kibana，Docker的可视化，Commit镜像

    docker安装使用Nginx # 搜索信息 docker search nginx # 下载镜像 docker pull nginx # 运行测试 # --name给容器命名 # -p 宿主机端口: ...

  9. .NET混合开发解决方案15 WebView2控件集成到WinForm程序编译后的文件及结构说明

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  10. 多线程07：async、future、packaged_task、promise

    async.future.packaged_task.promise 本节内容需要包含头文件:#include <future> 一.std::async. std::future 创建后 ...