说明：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. 【DataBase】MySQL 03 基本命令 & 语法规范

    参考至视频:P12 - P15 https://www.bilibili.com/video/BV1xW411u7ax?p=82 SHOW 和相关的基本命令 查看所有的数据库 SHOW DATABAS ...

  2. 【JS】04 DOM 文档对象模型 P1 查找元素、改变内容、绑定事件

    什么是DOM? Document Object Model 文档指的是HTML文档 当浏览器打开一个网页的时候,实际上把HTML文档读取到内存中进行解析 整个HTML文档被封装为document文档对 ...

  3. 制约国产深度学习框架发展的根本原因 —— AI芯片的无法自主生产或量产

    秉着没事就胡言乱语的宗旨,这里在接着胡说八道一下. 国外的深度学习框架如TensorFlow.pytorch.Jax打的如火如荼,按照以往惯例我们是不应该去做自主研发软件系统的,毕竟硬件不在掌握之下, ...

  4. 国产操作系统 deepin —— UOS 系统下使用蓝牙音箱或蓝牙耳机不能正常工作

    近日搞来了一个国产CPU的电脑,自带系统为UOS,具体可见: https://www.cnblogs.com/devilmaycry812839668/p/14828130.html 忽然发现这个系统 ...

  5. 【金猿人物展】白鲸开源CEO郭炜：数据要素是未来数据“新能源”产业么？

    纵观2023年中国数据行业发展与2024年数据产业趋势,就不得不提到2023年全年国家全年强调的数据要素的概念以及在2023年12月中国国家数据局等17个部门联合印发了<"数据要素×& ...

  6. Kotlin 循环与函数详解：高效编程指南

    Kotlin 循环 当您处理数组时,经常需要遍历所有元素. 要遍历数组元素,请使用 for 循环和 in 操作符: 示例 输出 cars 数组中的所有元素: val cars = arrayOf(&q ...

  7. Java核心技术之Date相关

    import java.time.DayOfWeek; import java.time.LocalDate; import java.util.Scanner; /** * @author Suns ...

  8. 解决 Docker CE 在无根模式（rootless）下无法通过 IPv6 拉取映像的问题

    折腾一天快把我逼疯了 本来 Docker 对 IPv6 的支持就不好,再来个 rootless,雪上加霜 首先,我们要区分 Docker Engine 和 里面的 Image. 拉取映像是 Docke ...

  9. mysql 读写分离之主从配置

    #mysql主从复制 ###下载mysql安装包 ###安装master mysql . 检查当前机器是否已经安装mysql yum repolist enabled | grep "mys ...

  10. C语言基础- Hello World

    第一个C语言程序 Hello World # include <stdio.h> //#关键标识符,表示用用头文件:include:引入都文件关键字 // stdio.h:系统标准输入.输 ...