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 column-rule-color属性怎么用

:not()是什么？:not()的简单使用

css浮动怎么做

css3做出多样边框特效

为什么外接css不起作用

css如何添加下划线

两分钟带你了解在css中三种使图片居中的方法

css的样式规则是什么样的

html以及css的常用用法

img元素可以用css吗

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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