本文摘自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;
}
|
效果如下:
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 transform属性怎么用
css怎样缩进文本?
css怎么设置滚动条透明
css给文字添加描边的方法是什么
css阴影边框怎么设置
你知道怎么利用css实现内凹圆角么
css怎么禁止选中文字
css怎样设置按钮不能点击
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么设置图片位置居中