css让图片居中

css让图片居中css 让图片居中 不管图片是方图 竖图 横图 都可以让图片在父框架下居中 即方图则占满整个父框架 横图则左右填充上下居中 竖图则左右居中上下填充 1 html 如下 这里的图片路径自己设置 2 css 如下 body background color gray red

css让图片居中,不管图片是方图、竖图、横图,都可以让图片在父框架下居中,即方图则占满整个父框架;横图则左右填充上下居中;竖图则左右居中上下填充

1、html如下:

 
  
css让图片居中 /*这里的图片路径自己设置*/

2、css如下

 body{ background-color: gray; } #redblock{ text-align: center; display: table-cell; vertical-align: middle; width:400px; height: 400px; background-color: red; } img{ max-width: 100%; max-height: 100%; } 

3、给父级元素设置样式:

     a、设定宽度和高度width、height

     b、设置text-align:center     vertical-align:middle

     c、设置display:table-cell

4、给Img设置max-width:100%     max-height:100%

5、显示的效果如下:

         横图

css让图片居中


方图

css让图片居中


竖图

css让图片居中



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/203355.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午10:00
下一篇 2026年3月19日 下午10:00


相关推荐

  • jediscluster.set加锁_redislock

    jediscluster.set加锁_redislock一、前置配置需要已经集成成功JedisCluster本人已实践的参考:https://blog.csdn.net/NullToSay/article/details/109813194二、定义RedisLock类importorg.apache.commons.lang.StringUtils;importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importredis.clients.jedis.JedisClust.

    2022年10月14日
    4
  • spring学习总结

    spring学习总结spring学习总结

    2022年4月25日
    91
  • snmp协议端口号_SNMP OID

    snmp协议端口号_SNMP OID记一次日常工作1、SNMP是一个简单的网络管理协议,起初我也不知道啥玩意,在自己做安全设备配置日志审计服务器时突然发现的,某厂商设备不支持syslog服务器配置,只有snmp的配置,我当即填上相关信息如下图可见,将状态整为开启,版本自己选择的v2,因为顾虑v1版本可能存在一些缺陷,填好IP、端口、间隔发送时间、还有一个community选项是对应我们的server端的名称。2、原本以为简单的就完事了,我就进行下一步取server端搞一搞,三下五除二的就把server端的基本信息配置好,下图仅为snmp

    2022年8月20日
    8
  • CreateMutex用法详解

    CreateMutex用法详解HANDLE nbsp CreateMutex LPSECURITY ATTRIBUTES nbsp lpMutexAttri nbsp nbsp 指向安全属性的指针 BOOL nbsp bInitialOwne nbsp nbsp 初始化互斥对象的所有者 LPCTSTR nbsp lpName nbsp nbsp 指向互斥对象名的指针 1 nbsp CreateMutex 只是创建了一把锁 nbsp nbsp 这把锁你用来锁门还是锁抽屉还是锁

    2026年3月19日
    2
  • mqtt服务器搭建(ubuntu)

    mqtt服务器搭建(ubuntu)一、MQTT介绍1.1简介MQTT(MessageQueuingTelemetryTransport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的”轻量级”通讯协议,该协议构建于TCP/IP协议上,由IBM在1999年发布。MQTT最大优点在于,可以以极少的代码和有限的带宽,为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议,使其在物联网、小型设备、移动应用等方面有较广泛的应用。MQTT是一个基于客户端-服务器的消息发布/

    2022年6月6日
    322
  • linux下如何完全删除用户

    linux下如何完全删除用户转载:http://blog.51cto.com/wutengfei/19234461、首先进入系统创建一个用户  [root@localhost/]#useraddhaha  #创建用户 haha是用户名   [root@localhost/]#passwdhaha  #为该用户设置密码  更改用户haha的密码。  新的密码:*****…

    2022年6月4日
    37

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号