<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. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

  2. （第二章第二部分）TensorFlow框架之读取图片数据

    系列博客链接: (第二章第一部分)TensorFlow框架之文件读取流程:https://www.cnblogs.com/kongweisi/p/11050302.html 本文概述: 目标 说明图片 ...

  3. 实现同比、环比计算的N种姿势

    在做数据分析时,我们会经常听到同比.环比同比的概念.各个企业和组织在发布统计数据时,通常喜欢用同比.环比来和之前的历史数据进行比较,用来说明数据的变化情况.例如,统计局公布2022年1月份CPI同比增 ...

  4. C#学习路线和感想

    C#我目前是针对我所需要的部分进行有选择的学习,我看了<C#程序设计经典300例>,发现这个语言还是很有趣的,企业实用性很强,如果以后想做企业这一块可以学学.

  5. 2. Java入门

    2.Java入门 2.1.安装开发环境 卸载JDK 删除Java的安装目录 删除JAVA_HOME 删除path下关于Java的目录 java -version 安装JDK 百度搜索JDK8,找到下载 ...

  6. web自动化之selenium(一)

    自动化搭建环境 1.自动搭建(一) #安装 pip install webdriver-helper 1.1示例 from webdriver_helper import * #get_webdriv ...

  7. jdk配置完成tomcat无法启动问题解决

    今天在进行struts2练习之前,准备为电脑配置tomcat容器,发现jdk的java指令可以正确运行,而tomcat启动时控制台弹出后立即消失.查资料显示jdk为正确配置,但是自己的java指令都能 ...

  8. 全面解析UNIX缓冲区溢出 深度防御体系

    首先简要回顾一下缓冲区溢出的攻击大系: ◆栈溢出(stack smashing) 未检查输入缓冲区长度,导致数组越界,覆盖栈中局部变量空间之上的栈桢指针%ebp以及函数返回地址retaddr,当函数返 ...

  9. Chartjs 初体验

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

  10. Linux 中如何使用 Htop 监控工具？【网络安全】

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.Htop 界面展示 "Htop 是一个用于 Linux/Unix 系统的交互式实时进程监控应用程序,也是 top 命令的替代品,它是所 ...