css设置图片位置居中的方法:可以在图片外面添加一个p标签,然后通过设置line-height属性使图片位置居中,如【<p><img src=""></p> line-height:300px;】。
本文操作环境:windows10系统、css 3、thinkpad t480电脑。
具体方法如下:
1、利用display:table-cell,具体代码如下:
html代码如下:
<div class="img_wrap"> <img src="wgs.jpg"> </div>
css代码如下:
.img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; display: table-cell; //主要是这个属性 vertical-align: middle; text-align: center; }
效果如下:
2、采用背景法:
html代码如下:
<div class="img_wrap"></div>
css代码如下:
.img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; background: url(wgs.jpg) no-repeat center center; }
效果如下图:
(学习视频分享:css视频教程)
3、图片外面用个p标签,通过设置line-height使图片垂直居中:
html代码如下:
<div class="img_wrap"> <p><img src="wgs.jpg"></p> </div>
css代码如下:
*{margin: 0px;padding: 0px} .img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; text-align: center;} .img_wrap p{ width:400px; height:300px; line-height:300px; } .img_wrap p img{ *margin-top:expression((400 - this.height )/2); vertical-align:middle; border:1px solid #ccc; }
效果图如下:
相关推荐:CSS教程
作者:王林
实现方法:1、使用querySelector()获取指定元素对象;2、使用“元素对象.style.opacity = Math.sin(2 * Math.PI * time)”语句来...
bootstrap是一个非常好用的css框架,里面集成了各种页面常用到的排版和特效,图片轮播就是其中之一啦要修改图片轮播的时间间隔,...
虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同。本文整理了一些可以看得见的区别,先掌握一些即可,等全部支持后再细细研究...
css中主要的三种选择符,分别为:id选择符、class类选择符和元素选择符。id选择符可以为标有特定id的HTML元素指定特定的样式;cl...
javascript取指定字符的方法:1、通过substring方法提取字符串中介于两个指定下标之间的字符;2、通过substr方法取指定数目的字...
本文将分享一下自己学习Bootstrap时的一点经验,希望能对正在开始与Bootstrap作战的小伙伴们一点点帮助,避免一些不必要的曲折。...
本篇文章主要的讲述了一个关于HTML超链接文本字体颜色的更改方法,说了一个是纯a标签的文本更改,还有一种是把a标签放在div标签...
判断方法:1、用“if(!Obj)”语句;2、用“if(!window.Obj)”;3、用“if(!this.Obj)”;4、用“if(typeof Obj==undefined)”;5...