页面要达到的样子

中间写的是时候是向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. vue3组合式API

    vue3组合式API 为什么要用组合式API,我们来看看它是如何解决vue2的局限性的 1.vue2的局限性 当组件内容越来越多,逻辑越来越复杂,可读性就会降低,并且难以维护. vue2组件采用配置式 ...

  2. Python夺命20问

    1.请观看下列代码并回答问题: import collections from random import choice Card = collection.namedtuple('Card', [' ...

  3. partTwo自动出题程序第一阶段

    课堂测试1:像二柱子那样,花二十分钟写一个能自动生成30道小学四则运算题目的 "软件" 代码实现 import java.util.Random;//import java.uti ...

  4. 百度AI人脸检测——解析JSON 数据格式

    1.了解一下 通常情况下,每个需要访问网络的应用程序都会有一个自己的服务器,我们可以向服务器提交数据,也可以从服务器上获取数据.不过这个时候就出现了一个问题,这些数据到底要以什么样的格式在网络上传输呢 ...

  5. Envoy熔断限流实践（二）Rainbond基于RLS服务全局限流

    Envoy 可以作为 Sevice Mesh 微服务框架中的代理实现方案,Rainbond 内置的微服务框架同样基于 Envoy 实现.本文所描述的全局限速实践也是基于 Envoy 已有的方案所实现. ...

  6. 用python爬虫，对12306网站进行模拟登陆

    from selenium import webdriver from time import sleep from PIL import Image from selenium.webdriver ...

  7. JavaWeb之如何把请求数据转成实体类

    JavaWeb之如何把请求数据转成实体类 自己写个工具类加入下面两个静态方法 自定一个注解类DateTimeFormatting 调用方式User user = util.ObjectFromMap( ...

  8. FreeRTOS --（7）任务管理之入门篇

    转载自 https://blog.csdn.net/zhoutaopower/article/details/107019521 任务管理是操作系统中重中之重,不管什么 OS ,任务的调度管理都是核心 ...

  9. python使用虚拟环境venv

    venv模块支持使用自己的站点目录创建轻量级"虚拟环境",可选择与系统站点目录隔离.每个虚拟环境都有自己的Python二进制文件(与用于创建此环境的二进制文件的版本相匹配),并且可 ...

  10. linux系统平均负载高（load average）

    系统平均负载高(load average) 问题现象 两个案例都是:系统平均负载高,但cpu,内存,磁盘io都正常 什么是系统平均负载 平均负载是指单位时间内,系统处于可运行状态和不可中断状态的平均进 ...