图片在div中垂直居中

最新推荐文章于 2024-03-31 19:00:40 发布

YingMuMonkey

最新推荐文章于 2024-03-31 19:00:40 发布

阅读量642

点赞数

分类专栏：随记

本文链接：https://blog.csdn.net/YingDaoMonkey/article/details/81007336

版权

随记专栏收录该内容

100 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  style 
  > 
 
 
  .box{ 
 
 
  width: 
  150px; 
 
 
  height: 
  300px; 
 
 
  border: 
  1px 
  solid 
  blue; 
 
 
  line-height: 
  300px; 
 
 
 

   } 
 
 
  .box img{ 
 
 
  width: 
  100%; 
 
 
  vertical-align: 
  middle; 
 
 
  display: 
  inline-block; 
 


   } 
 
 
  < 
  / 
  style 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  class= 
  "box" 
  > 
 
 
  < 
  img 
  src= 
  "touxing.png" 
  alt= 
  "" 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  body 
  > 
 
</html>
父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。
vertical-align不可继承，必须对子元素单独设置。