浮動div中的圖片垂直居中

本文轉載自查看原文 2016-12-14 09:39 3527

table-cell方法垂直水平居中

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="table-cell方法居中">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<style>
.upload_img {
　　position: relative;
　　width: 150px;
　　height: 150px;
　　border: 1px solid #ccc;
　　display: table-cell;
　　background: #eee;
　　vertical-align: middle;
}
.upload_img img {
　　border: none;
　　max-width: 100%;
　　max-height: 100%;
　　display: block;
　　margin: auto;
}
</style>

<body>
    <div id="imgdiv3" class="upload_img">
           <img src="http://images2015.cnblogs.com/blog/653009/201603/653009-20160310103258132-1841991840.jpg"  id="imgShow3"  >
      </div>
</body>
</html>

當div浮動的時候就無法使用上面的方法進行垂直居中了，接下來就用到line-height進行居中了

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
    <style>
            .upload-img {
            float:right;
      width: 200px;
      height: 200px;
      background-color: #ccc;
      line-height: 200px;
      vertical-align: middle;
      text-align: center
    }
img{
  vertical-align: middle;max-width:100%;max-height:100%;
}
    </style>    
<body>
<div>
  <div class="upload-img">
    <img  src="http://images2015.cnblogs.com/blog/653009/201603/653009-20160310103258132-1841991840.jpg">
   </div>
</div>

</body>
</html>

有個問題值得注意，編寫代碼的時候沒有添加

<!doctype html>

造成了沒有辦法垂直居中!

代碼演示：https://jsfiddle.net/silence19/djmznmpa/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 div 圖片垂直居中 div+css:div中圖片垂直居中圖片在DIV中垂直居中的顯示方法讓圖片在div盒子中水平垂直居中小的div在大的div中垂直居中小的div在大的div中垂直居中小的div在大的div中垂直居中 CSS+DIV 圖片垂直居中 div容器中img圖片居中-html在div中如何將圖片居中-img在div中垂直居中 CSS中設置div垂直居中