css使图片垂直居中

文章目录

图片居中是项目中经常会用到的,尤其是图片的垂直居中,网上也又很多方法。但有的拿来测试并没有效果。所以抽时间整理了以下代码,供大家参考。

首先说一下图片的水平居中这个很简单,直接用text-align:center就可以实现。

代码:

<div id=”center”>
<img src=”images/timg.jpg” width=”400″ height=”200″>
</div>

<style>
#center{
width:800px;
height:400px;
border:1px dashed #000;
margin:20px;
text-align:center;
}
</style>

效果图:

那如何实现图片的垂直居中呢?

第一种方法:line-hight

代码:

<div id=”center”>
<img src=”images/timg.jpg” width=”400″ height=”200″>
</div>

<style>
#center{
width:800px;
height:400px;
border:1px dashed #000;
margin:20px;
text-align:center;
line-height:600px;
}
</style>

效果图:

用这个方法要注意的是line-height的值是图片的高度加上容器的高度。

第二种方法:

代码:

<div id=”center”>
<img src=”images/timg.jpg” width=”400″ height=”200″>
</div>

<style>
#center{
width:800px;
height:400px;
border:1px dashed #000;
margin:20px;
text-align:center;
display:table-cell;
vertical-align:middle;
}
</style>

效果图:

这种方法最主要的是这个两个属性[display:table-cell;][vertical-align:middle;]。

第三种方法:背景法

代码:

<div id=”center”>
</div>

<style>
#center{
width:800px;
height:400px;
border:1px dashed #000;
margin:20px;
background:url(“images/timg.jpg”);
background-repeat:no-repeat;//设置背景不重复
background-position:center;//设置居中
}
</style>

效果:

这种方法相对来说是最简单的方法了。

以上的三种方法亲测有效,有需要的小伙伴可以拿去用。

原文链接:,转发请注明来源!

发表评论

要发表评论,您必须先登录