说明：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. SemanticKernel/C#：检索增强生成(RAG)简易实践

    检索增强生成(RAG)是什么? RAG是"Reference-based Generative model with Attention"的缩写,也可以被称为"Retri ...

  2. 【Hibernate】Re01.5 API

    1.Session单表的CRUD操作 1.增加或者修改,使用同一个方法,或者下面的两个也行: 感觉多此一举... 2.删除方法,硬删除: 3.获取方法提供了两种,Get & Load get方 ...

  3. 基于MybatisPlus的简单分页查询和条件分页查询

    分页查询 分析: 分析文档要求 查看前端传递给后台的参数 分析参数进行编码 后台返回给前端的数据 思路 浏览器 - > Controller层 - > Service层 - > Ma ...

  4. [COCI2021-2022#6] Naboj 题解

    前言 题目链接:洛谷. 题意简述 给定一张无向图,每条边有个哨兵,初始在边的中间.你可以把某个结点旁边的哨兵全部吸引或远离这个结点.给出最后每个哨兵在边的哪一端,请构造出一种可能的操作方案或报告无解. ...

  5. java-多线程（下）

    多线程简单入门(Java)(下篇:多线程Java中的使用) 目录 一.创建多线程 二.线程的安全 三.线程的通信 一.创建多线程 在Java中,多线程的创建有4种方式. 方式一:继承于Thread类; ...

  6. Unreal使用GooglePAD生成AAB包，并加在fast-follow资源

    1.修改obbfilter,设置需要添加到obb的pak文件 2.修改项目设置,打AAB包 3.cook stage生成所有Paks文件 4.将部分pak文件拷贝到Intermediate/Andro ...

  7. 将整个工程的GBK转为utf-8格式

    eclipse将整个工程转为utf-8时原先中文注释会变为乱码,13年时写了个脚本将整个文件的java以及配置文件转为utf-8格式,下面是代码 package com.code.pd; import ...

  8. 组长：你熟悉过React，开发个Next项目模板吧，我：怎么扯上关系的？

    组长:你熟悉过React,开发个Next项目模板吧,我:怎么扯上关系的? 最近工作安排我开发一个Next.js项目模板,心里默笑,React用得少得都快忘光了,现在得搞Next?虽然我曾是React的 ...

  9. [原创] 域格CLM920模组使用pppd专网拨号

    域格CLM920模组使用pppd专网拨号 参考资料 参照<9X07 模块LINUX集成用户手册版本_V1.60>的第四章节使用pppd拨号上网 编写chat脚本chat-script 要点 ...

  10. Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手

    前言 在Vue 3.5.0-beta.3版本中新增了一个base watch函数,这个函数用法和我们熟知的watch API一模一样.区别就是我们之前用的watch API是和Vue组件以及生命周期是 ...