css怎样让图片居中

PHP中文网 JavaScript

本文摘自PHP中文网，作者藏色散人，侵删。

css让图片居中的方法：1、设置“<img src="katong.png">”；2、设置css代码；3、给父级元素设置样式；4、给Img设置“max-width:100% max-height:100%”即可。

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

css让图片居中

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

1、html如下：

1

2

3

4

5

<body>

    <p id="redblock">

        <img src="katong.png" >  /*这里的图片路径自己设置*/

    </p>

</body>

2、css如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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如何使用精灵图

详解使用纯css实现滚动进度条效果的几种技巧

如何实现css代码复用

使用css flexbox构建网站标题

css图片可以旋转吗

css绝对路径怎么写

css为什么不能正常加载

css outline-width属性怎么用

css怎么实现字体描边效果

css中常见的布局有哪些？

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...