html和js图片上下居中的两种方法

最近总是碰到让图片上下居中的问题,左右居中直接设置
  1. margin0 auto;就哦了,上下居中查了很多方法都行不通,多次试验最终有成功的两种方法总结下:

一种js实现,一种css实现:

一、js让图片上下居中:

  1.首先要知道你要显示图片的高度范围:div_height。
  2.由于获取图片高度前提是图片加载完毕,所以js函数调用不能用$(document).ready(),需要用$(window).load(function{……}),原因是前者加载完页面框架就会调用,而后者需要等所有页面元素包括图片加载完才调用。
  3.获取图片高度img_height。
  4.设置图片的 margin-top = ( div_height - img_height ) / 2。

示例:高度范围:220px
html:
<div class="box">
            <div class="photo_box">
                  <img src="..//photo/~Y[ZW)$@O]`RW_4LUGI@MWB.jpg" data-toggle="modal" data-target="#myModal"/>
                </div>
   </div>

js:
$(window).load(function(){
var img_height = $(this).height();
var margin_top = (220 - img_height) / 2;
$(this).css({"margin-top": margin_top + "px"});
});
   

二、html+css设置图片高度居中(假设包含图片的div高度为div_height = 600px,图片高度小于600px)
   1.给图片的父div(本文假设为600px)设置
     
  1. line-height600px;  // 图片在600px的高度上下居中,该高度可根据需求自行修改
  2. displaytable-cell;
  3. vertical-alignmiddle;

   2.注意该父div的高度必须等于图片相对剧中显示的高度。
示例:

html:
<div class="carousel" data-ride="carousel">
             
<div class="carousel-inner">
                  <div class="item">
                  <img src="1.png">
                  </div>
              </div>
        </div>

css:
.carousel {
height: 600px;
line-height: 600px;
display: table-cell;
vertical-align: middle;
}


  1.    
  1. height600px;
  2. line-height600px;
  3. displaytable-cell;
  4. vertical-alignmiddle;
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页