<body>

    <div id="#div1">

        <img src="img1.png"></img>

    </div>

</body>

那么，如何让img元素在div中居中对齐呢？

第一种方法

第一步：在img标签后面添加一个元素，比如说添加一个span元素

<body>

    <div id="div1">

        <img src="img1.png"></img><span></span>

    </div>

</body>

第二步：为这几个元素设置样式

#div1 {

    text-align:center;

}

#div1 span {

    display:inline-block;

    vertical-align: middle;

}

#div1 img {

    vertical-align:middle;

}

好啦，完成以上操作，这个Img元素在div中就是垂直居中的了，这种方法的兼容性很好的，唯一的缺点就是需要在元素后面添加一个元素啦。注意，这个添加的元素最好是span元素，如果是div的话，在低版本ie下的话有问题。因为不支持div转换为行内块元素。

第二种方法

这种方法就是利用css3的新特性了。

#div1 {

    display:flex;

    vertical-align:middle;

    align-items:middle

}

这种方法的缺点就是，如果浏览器不支持css3，那就没用了。

一个未知宽高的元素在div中垂直水平居中的更多相关文章

  1. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  2. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  3. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  4. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  5. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  6. table-cell实现未知宽高图片，文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

  7. 已知宽高和未知宽高的div块的水平垂直居中

    //已知宽高的情况 .div1_container{     border:1px solid #00ee00;     height:300px;     position:relative; } ...

  8. 不定宽高的DIV，垂直水平居中

    1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...

  9. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

随机推荐

  1. Could not load file or assembly 'System.Windows.Forms, Version=6.0.2.0, Culture=neutral, PublicKeyToken=b77a5c561934e089

    项目升级后提示错误 System.IO.FileNotFoundException: Could not load file or assembly 'System.Windows.Forms, Ve ...

  2. Markdown语法浅学

    typora语法使用 1.字体 *斜体*,_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ <u>下划线</u> ***分割线 , --- 2.标题 # 一级标题 ...

  3. JAVA String、StringBuilder、和StringBuffer的区别，及如何使用

    目录 String类 一.String类的理解和创建对象 二.String类创建的方式 两种创建String对象的区别 测试题 三.String常用方法 四.StringBuffer类 1.Strin ...

  4. JZ-064-滑动窗口的最大值

    滑动窗口的最大值 题目描述 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值 ...

  5. JZ-022-从上往下打印二叉树

    从上往下打印二叉树 题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 题目链接: 从上往下打印二叉树 代码 import java.util.ArrayList; import jav ...

  6. 20192204李龙威 2019-2020-2 《Python程序设计》实验三报告

    20192204李龙威 2019-2020-2 <Python程序设计>实验三报告 课程:<Python程序设计> 班级: 1922 姓名: 李龙威 学号:20192204 实 ...

  7. ES77

    PUT rr_bd202_chaos_20211220{ "aliases" : { "rr_bd202_chaos_pgold":{} }, "ma ...

  8. Java案例——学生管理系统

    简单完整的学生管理系统 学生类 public class Student { private String id; private String age; private String name; p ...

  9. Chartjs 初体验

    I 官网 https://www.chartjs.org/ https://chartjs.bootcss.com/ 中文网址 简单易上手,支持的Chart 类型:折线图,饼图,柱状,雷达图,网状图 ...

  10. 嵌入式linux驱动开发 笔记

    @ 目录 首个驱动hellodrv 1.编写源码 2.编译模块 3.加载驱动 首个驱动hellodrv 3.如果下载不到,就自己编写,并编译驱动. 1.编写源码 2.编译模块 1.先写makefile ...