<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. 被vector动态扩容给坑了！

    大家好,我是东北码农.记录一下工作中事. 前几天,运维同事给我反馈了一个问题: 通过监控发现,线上的一个服务,业务线程时不时会出现卡顿,卡顿大约持续几秒. 我们做金融系统后台开发的,对性能要求很严格的 ...

  2. Python 让我舅舅的书法作品和 PIL 库发生点美的误会

    Python 让我舅舅的书法作品和 PIL 库发生点美的误会 1. 前言 不久之前写过一篇文章,详细介绍了 PIL 库中的 Image 模块的使用.曾经学习过.使用过一段时间的 PS,认识 PIL 后 ...

  3. async-validator 源码学习（一）：文档翻译

    async-validator 是一个表单异步校验库,阿里旗下的 Ant-design 和 Element 组件库中的表单验证使用的都是 async-validator ,目前版本已更新到 4.0.7 ...

  4. 2.3 C++STL vector容器详解

    文章目录 2.3.1 引入 2.3.2 代码实例 2.3.3 运行结果 总结 2.3.1 引入 vector 容器 动态数组 可变数组 vector容器 单口容器(尾部操作效率高) vector动态增 ...

  5. VS2010 显示TFS删除项

    通过 TFS 是删除的工程显示出来, 操作步骤.Tools->Options-> Source Control ->Visual Studio Team Foundation Ser ...

  6. SpringBoot 中实现跨域的几种方式

    一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. ...

  7. python2,3的区别

    python2和python3的区别: 1.    python 2x:源代码不规范,源码重复多 python 3x:源码 清晰,简单,优美 2.python 2x:默认编码是ASCII码 编码更改: ...

  8. 嵌套OOPS导致系统卡死 每个CPU都上报softlockup的问题

    问题现象:在ARM服务器上,构造oops异常,本应该产生panic,进入dump流程,并且系统重启,但是系统并未重启,而是出现了卡死,在串口会隔一段时间就循环打印调用栈信息.如下所示 linux-fA ...

  9. python练习册 每天一个小程序 第0013题

    # -*-coding:utf-8-*- ''' 题目描述: 用 Python 写一个爬图片的程序,爬 这个链接里的日本妹子图片 :-) 地址: http://tieba.baidu.com/p/21 ...

  10. Knife4j添加lombok及注解初探

    一.POM添加 在pom文件里添加包 1 <!-- 添加Lombok插件--> 2 <dependency> 3 <groupId>org.projectlombo ...