说明：img是行内块元素，用一个盒子（父元素）嵌套img（子元素）

text-align:center;可以让父元素为块元素的行内块或行内元素水平居中； vaertical-align:middle;让img元素垂直居中；

代码：

   <style>

      .fa {

        display: table-cell;

        /* 垂直居中 */

        vertical-align: middle;

        /* 水平居中 */

        text-align: center;

        width: 400px;

        height: 400px;

        background-color: pink;

      }

    </style>

  </head>

  <body>

    <div class="fa">

      <img src="./00 MyCode/images/avatar.jpg" alt="" />

    </div>

  </body>

如何让img图片居中的更多相关文章

  1. line-height，vertical-align及图片居中对齐问题根源解析

    关于图片居中对齐的问题,进入前端行业虽然有一段时间了,以为自己懂了,可是实际上还是一知半解,找了一些博客来看了一下,但是感觉讲的有点碎,看完还是一知半解. 查阅了一下<css权威指南>,结 ...

  2. Html、Css-----当有文字和图片的时候，需要文字和图片居中，怎么实现？不想文字换行怎么设置

    1 当有文字和图片的时候,需要文字和图片居中,怎么实现? <a href=#" target="aa" style="white-space:nowrap ...

  3. [转]div 让文字或图片居中

    本文转自:http://qsfwy.iteye.com/blog/250206 在div 中让 文字或图片居中,请参考以下代码1: - - - - - - - - - - - - - - - - - ...

  4. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  5. object-fit: 炒鸡方便的图片居中方法

    今天在项目中遇到图片居中的问题,嗯,之前也有写过解决这个问题的文章,有n种方法.不过今天要说一个新的方案:object-fit ,嗯,这个才是真的方便的方案啊. 先看预览: object-fit 只能 ...

  6. bootstrap轮播组件,大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...

  7. extjs中grid中行内文本或图片居中显示

    我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: <div id="weatherP_grid-body& ...

  8. IE/Chrome背景图片居中1px偏移解决方法

    最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面 ...

  9. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  10. diplay:table-cell和伪元素：after方法让图片居中

    让图片居中和文字居中是不一样的,文字居中可以通过line-height等调整,让图片居中方法,参考各种资料博文和测试  目前接触两种方法 display:table-cell和伪元素:after方法 ...

随机推荐

  1. HDP 源码集

    HDP 各个组件的源码(含历史各个版本) 分支 组件 标签 最后发版时间 地址 hadoop 2256 2020-12-21 17:44 https://gitee.com/piaolingzxh/h ...

  2. 2、SpringBoot2之入门案例

    2.1.创建Maven工程 2.1.1.创建空项目 2.1.2.设置项目名称和路径 2.1.3.设置项目sdk 2.1.4.项目初始状态 注意:需要关闭项目再重新打开,才能看到SpringBoot-P ...

  3. 使用Java对稀疏数组的压缩与还原

    稀疏矩阵的压缩与还原 稀疏数组中元素个数很少或者有大量的重复值,如果直接保存保存,会浪费很多空间,这时,就可以考虑对数组进行压缩存储. 先定义一个稀疏数组 //创建一个二维数组 11 * 11 int ...

  4. TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！

    你好,我是 Kagol. 我们非常高兴地宣布,2024年6月26日,TinyVue 发布了 v3.17.0 . TinyVue 每次大版本发布,都会给大家带来一些实用的新特性,上一个版本我们重构了 c ...

  5. OneFlow计算框架的OneAgent是不是一个子虚乌有的东西？

    自己是搞强化学习的,今天看了些OneFlow计算框架的一些资料,发现OneFlow官方一直有宣传自己的强化学习框架--OneAgent,但是十分诡异的是从了OneFlow的官方宣传可以看到这个词,但是 ...

  6. golang 指定权限是 0o755 而不是 0755

    在Go语言中,当指定文件权限时,使用前缀 0o 来明确表示八进制数是一种推荐的做法. 这是因为在Go语言中,八进制字面量必须以 0o 或 0O 开头,后跟八进制数字(0-7). 这种语法是从 Go 1 ...

  7. Windows使用命令行终止任务

    在Windows操作系统中,可以使用命令提示符(cmd)或Windows PowerShell来查看运行的任务并终止指定的任务.以下是一些常用的命令: 使用命令提示符(cmd) 查看运行的任务: 打开 ...

  8. 如何在通用异常处理时获取到方法名称(获取注解参数JoinPoint)

    1.背景 很多时候我们在梳理公共异常时,需要获取到接口的而具体名称,便于很好的提示是那个接口错误了 2.实现逻辑 1.在controller方法上的注解上写方法名称,一般使用了swagger都有方法名 ...

  9. git忽略文件夹中除了指定的文件外的其他所有文件

    **/test/* !**/test/a.py

  10. 新员工一口气写完了这些C语言例子，领导给他转正了！

    持续更新中... 很多想从事嵌入式Linux开发的老铁问一口君,有没有快速提升自己编程水平的小例子? 一口君根据自己多年工作经验,整理了一些基于Linux的c语言的非常实用的小例子, 这些例子在嵌入式 ...