让HTML img垂直居中的三种办法:
声明:原文来自DIVCSS5,其次原文代码存在一些引起误解的地方,已经进行修改和测试,下文会注明引起误解的地方。主要收藏为方便下次阅读,故进行转发,如有侵权,请私聊本人,定立即删除。原文连接:DIVCSS5_让html img垂直居中的三种办法让HTML img垂直居中的三种办法:一、使用flex完成垂直居中操纵cssflex实现垂直居中。flex或许不是完成垂直居中最好的选择,由于IE8,9其实
·
- 声明:原文来自DIVCSS5,其次原文代码存在一些引起误解的地方,已经进行修改和测试,下文会注明引起误解的地方。主要收藏为方便下次阅读,故进行转发,如有侵权,请私聊本人,定立即删除。
- 原文连接:DIVCSS5_让html img垂直居中的三种办法
让HTML img垂直居中的三种办法:
一、使用flex完成垂直居中
操纵css flex实现垂直居中。flex或许不是完成垂直居中最好的选择,由于IE8,9其实不赞成它。
那时,为了用flex实现垂直居中,我们起首要竖立一个包裹着图片的div元素,日后给它定义一些根基属性。
如下图片img宽度为(设置为)100px,高度为100px。
HTML代码部份:
<div class="flexbox">
<img src="1.jpg" alt="">
</div>
CSS代码一部分:
.flexbox{
width: 1000px;
height: 1000px;
background: pink;
/* 给父元素添加下面这两个属性,即可让子元素的图片垂直居中,且父元素的 align-items: center 为不可缺少属性*/
display: flex;
align-items: center
}
.flexbox img{
width: 500px;
/* align-items: center 此处并不需要这个属性,多余 */
}
二、操作display: table;完成img图片垂直居中
HTML代码:
<div class="tablebox">
<!-- 使用table/table-cell的方法一定要将子元素的图片包裹在一个块级元素的容器中 -->
<div id="imgbox">
<img src="1.jpg" alt="">
</div>
</div>
CSS代码:
.tablebox{
width: 1000px;
height: 1000px;
background: pink;
/* 给父元素添加display:table属性 */
display: table
}
#imgbox{
/* 给子元素(图片的容器)添加display:table-cell & vertical-align: middle;属性 */
display: table-cell;
vertical-align: middle;
}
#imgbox img{
width: 500px;
}
三、用绝对定位完成垂直居中(举荐-兼容性好)
HTML代码:
<div class="posdiv">
<img src="1.jpg" alt="">
</div>
CSS代码:
.posdiv{
width: 1000px;
height: 1000px;
background: pink;
margin:0 auto
/* 给父元素添加相对定位,让子元素相对父元素进行偏移 */
position: relative;
}
.posdiv img{
width: 500px;
/* 老生常谈的方法,先让子元素的上边界处于父元素中间线的位置,在让子元素向上偏移自身的50%即可 */
position: absolute;
top: 50%;
transform: translateY(-50%);
/* 此处最好不要有margin-top: -100px; 这样的写法,不具有普遍适用性,假如是一个动态网页,需要从服务器获取资源,图片的大小可能随时会变,这种方法会直接失效,而且通过上外边距来调整位置就是在凑答案,强烈不推荐这种写法。向上移动自身的一半即可*/
}
更多推荐
已为社区贡献1条内容
所有评论(0)