css怎么设置图片位置居中


本文摘自PHP中文网,作者V,侵删。

css设置图片位置居中的方法:可以在图片外面添加一个p标签,然后通过设置line-height属性使图片位置居中,如【<p><img src=""></p> line-height:300px;】。

本文操作环境:windows10系统、css 3、thinkpad t480电脑。

具体方法如下:

1、利用display:table-cell,具体代码如下:

html代码如下:

1

2

3

<div class="img_wrap">

   <img src="wgs.jpg">

</div>

css代码如下:

1

2

3

4

5

6

7

8

.img_wrap{

    width: 400px;

    height: 300px;

    border: 1px dashed #ccc;

    display: table-cell; //主要是这个属性

    vertical-align: middle;

    text-align: center;

}

效果如下:

72cd05b5aab1f22389a3af807404aae.png

2、采用背景法:

html代码如下:

1

<div class="img_wrap"></div>

css代码如下:

1

2

3

4

5

6

.img_wrap{

    width: 400px;

    height: 300px;

    border: 1px dashed #ccc;

    background: url(wgs.jpg) no-repeat center center;

}

效果如下图:

阅读剩余部分

相关阅读 >>

什么是css预处理器

css如何增加下划线

css中不属于添加在当前页面的形式是什么

html外部引用css文件不生效的原因

详解css z-index的权重问题

如何复制css代码

css如何实现禁止选择文本

css背景图片怎么设置透明度渐变

css怎么实现平方

css中rem有什么特点

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




打赏

取消

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

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

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

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

评论

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

    暂无评论...