display:flex 图片居中效果

2019-7-20 13:45| 作者: admin| 查看: 2626| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它使用flex弹性布局实现图片垂直居中效果。

关于弹性布局的更多内容可以参阅display:flex 弹性布局一章节。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta name="author" content="http://www.softwhy.com/" /> 
<meta charset="gb2312">
<title>蚂蚁部落</title>
<style type="text/css">
.demo{
  width:500px;
  height:500px;
  border:2px solid #ddd;
  background:#f5f5f5;
  padding:6px;
  float:left;
  margin-left:20px;
  
  /*flex布局(作用于容器)*/
  display:flex;
  
  /*水平居中(作用于容器)*/
  justify-content:center;
  
  /*垂直居中(作用于容器)*/
  align-items:center;
}
.demo img{
  max-width:100px;
  max-height:100px;
  width:auto;
  height:auto;
}
</style>
</head>
<body>
<div class="demo">
  <img src="demo/CSS/img/girl.jpg">
</div>
</body>
</html>

上面的代码实现了我们的要求,当然有一定的浏览器支持性问题。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部