display:flex 圖片居中效果

2019-7-20 13:45| 作者: admin| 查看: 2267| 評論: 0|來自: 螞蟻部落

本章節分享一段代碼實例,它使用flex彈性布局實現圖片垂直居中效果。

關于彈性布局的更多內容可以參閱display:flex 彈性布局一章節。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta name="author" content="http://www.arpjr.tw/" /> 
<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>

上面的代碼實現了我們的要求,當然有一定的瀏覽器支持性問題。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
大圣捕鱼2 名人彩票官方登录 球探体育比分网站 11选5前一自创方法 金殿国际棋牌 快三买大小单双不输 老时时定胆杀号万位 pk10技巧万能码规律 pk10骗局大揭秘 三肖六码在哪个网站 计划软件免费版 时时彩胜率最高的买法 鱼丸游戏手机号登录版 三肖六码3肖6码中持 推牌九押庄技巧 鳄鱼网站双色球预测 重庆时时必中计划