说明：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. （一）MOngoDB的安装与配置（Windows和Centos）

    其实Windows的安装没有什么难的,主要是后的Centos下的安装,我是在centos7上安装测试的,不管是手动安装还是脚本安装我都是成功才发出来的,有什么的问题可以留言,写博客只是为了记录和简单的 ...

  2. 【Java】Excel 读写图片工具类

    一.需求背景: 做一个大屏管理系统,基础信息包括管理的应用名称,大屏的截图,通过一个excel批量导入 excel的单元格里要插入图片,对应一个大屏应用的信息 导入需要读取到大屏截图,至于存哪还没说. ...

  3. 【Spring】使用SpringTest报错 java.lang.NoSuchMethodError

    完整报错信息: "C:\Program Files\Java\jdk1.8.0_301\bin\java.exe" -ea -Didea.test.cyclic.buffer.si ...

  4. Meta公司的Llama3大语言模型

    Github地址: https://github.com/meta-llama/llama3 官方介绍: https://ai.meta.com/blog/meta-llama-3/ 官方项目主页: ...

  5. 遗传算法和神经网络融合算法：GA-BP算法流程图

    相关: https://d.wanfangdata.com.cn/periodical/sxgcxb202109004

  6. 台式机，华硕主板z390ws，cpu为i7-9700k 安装Ubuntu18.04系统 使用独立显卡工作 （但是显示器HDMI线缆插在主板的HDMI插槽）开机进入系统运行几分钟后自动重启，此时主板显示错误码为AMI错误

    如题: 手上有这样一台新的工作站,配置为华硕主板z390ws,cpu为i7-9700k ,独立显卡为技嘉2060super, 安装Ubuntu18.04系统 . 在主板bios中进行设置(设置使用 P ...

  7. 【转载】 Ubuntu 中开机自动执行脚本的两种方法

    原文地址: https://www.jianshu.com/p/6366d7070642 作者:貘鸣来源:简书 ============================================ ...

  8. PyTorch视觉模型库torchvision.models介绍

    安装pytorch时我们一般都是会一并选择安装自带的视觉模型库 torchvision ,  该库不仅有经典的视觉模型结构同时还提供了对应参数的下载功能,可以说torchvision库是十分方便于研究 ...

  9. Leetcode: 1484. Groups Sold Products By The Date

    题目要求如下: 输入的数据为 要求按照日期查询出每日销售数量及相应产品的名称,并按照字符顺序进行排序. 下面是实现的代码: import pandas as pd def categorize_pro ...

  10. Linux查看硬件信息超强命令sar，以及可视化工具ksar

    一.概述 sar(System Activity Reporter,系统活动情况报告)是Linux下系统运行状态统计工具,可从多方面对系统的活动进行报告,包括:文件的读写情况.系统调用的使用情况.磁盘 ...