<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. Mac Mini 安装Ubuntu20.04 KVM

    在一台 Mac Mini mid 2011上安装Ubuntu20.04并配置KVM环境, 过程也适用于其他版本的Mac Mini. 硬件配置 I5 2415, 内存8G*2, 硬盘 SSD 500G ...

  2. Android studio常用快捷键导包的设置

    下面是一些快捷键的使用还有快速导包的设置 1. Ctrl+G 同时按下Ctrl+G快捷键弹出快速定位框,在框中输入行数点击OK即可快速切换到对应的行数,如图2.17所示. 2. Ctrl+E 同时按下 ...

  3. 国产化之虚拟ARM64-CPU安装银河麒麟操作系统

    背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟v4,CPU使用飞腾处理器.我本地没有这个国产的处理器,但飞腾是基于ARMv8架构的64位处理器,所以理论上基于这个CPU架构的硬件应 ...

  4. 基于Lumisoft.NET组件，使用IMAP协议收取邮件

    在早期一直使用Lumisoft.NET组件来进行邮件的处理查找,对于邮件的处理非常方便,之前在随笔<基于Lumisoft.NET组件的POP3邮件接收和删除操作>中也介绍过基于POP3和S ...

  5. gdb调试快速入门

    编译指令 gcc test.c -o test -g -g是加入调试信息,加入源码信息 启动gdb调试 gdb test 进入gdb中 设置参数 set args 10 20 显示参数show age ...

  6. laravel7 手机号验证码登陆

    1"设置路由: //展示手机登录页面 Route::get('admin','admin\AdminController@admin'); 2:html页面 <!DOCTYPE HTM ...

  7. tp5 商城模型id详情接口

    1:创建模型 2:定义关联模型 <?php namespace app\common\model; use think\Model; use traits\model\SoftDelete; c ...

  8. CA周记 2022年的第一课 - Rust

    现代编程语言有很多,在我的编程学习里面有小学阶段的 LOGO , 中学阶段的 Pascal ,也有大学阶段的 C/C++.Java..NET,再到工作的 Objective-C .Swift.Go.K ...

  9. 最详尽教程完整介绍-Windows 的 Linux 子系统-WSL1&WSL2

    安装 WSL 1. 开启WSL 必须启用"适用于 Linux 的 Windows 子系统"可选功能并重启,然后才能在 Windows 上运行 Linux 发行版. 以管理员运行Po ...

  10. Idea 连接MySQL数据库

    Idea 连接MySQL数据库 注意: 需要导入jar包,mysql-connector-java-8.0.16.jar mysql8.0及以上 使用的驱动 drive=com.mysql.cj.jd ...