垂直對齊固定大小的中心圖像div

我有一個div，它是145px X 145px。我在這個潛水裏有一個img。 img可以是任何尺寸（最長的一面是130px）。我希望圖像在div中垂直居中。我試過的所有東西都適用於大多數瀏覽器，但不適用於IE7。我需要一些能夠在IE7中工作的東西。垂直對齊固定大小的中心圖像div

來源

2011-02-15 David

我也有類似的要求。找到解決方案[here]（http://www.vanseodesign.com/css/vertical-centering/）。 – 2012-09-21 15:17:39

您可以通過在DIV背景這樣的替換圖像：

<div style="background:url(myimage.jpg) no-repeat center center"></div>

來源

2011-02-15 17:12:36

的工作，但它不適用於IE <9 – ndrizza 2012-12-29 20:27:25

不知道你到目前爲止嘗試過什麼，但垂直對齊如果圖像顯示爲內嵌元素，CSS屬性應該可以工作。

上垂直對齊的一些信息：http://www.w3schools.com/css/pr_pos_vertical-align.asp

如果你有考慮到所有圖像的高度，這是相當多而不使用JavaScript的唯一途徑。

如果圖像不內聯元素，你只需要適應一致高度的圖像，你可以做這樣的事情：

img { 
    margin-top: -50px; /* This number should be half the height of your image */ 
    position: absolute; 
     top: 50%; 
}

否則，我能想到的唯一辦法，以適應不同高度的圖像將會做與你的CSS類似的東西，但將負邊緣設置爲JS圖像高度的一半。

來源

2011-02-15 15:39:38

但正如他所說，圖像「img可以是任意大小」。所以-50的值只適用於精確到100px的圖像。因此不知道爲什麼這個答案有這麼多的選票，當它不解決OP的問題？ – NickG 2012-11-06 15:15:11

是的，我的主要答案是不同尺寸的圖像，但我也提供了一些其他選項的細節。你讀過我的整個答案還是隻讀了代碼？ – 2012-11-06 16:09:14

不知道有關IE7但IE9和下面的作品現代瀏覽器的其餘部分。

.picturecontainer{ 
     width:800px; 
     height:800px; 
     border:solid 1px; 
     display:table-cell; 
     vertical-align:middle; 

    } 
    .horizontalcenter{ 
     display:block; 
     margin-left:auto; 
     margin-right:auto; 
     vertical-align:middle; 
    }

要使用它

<div class="picturecontainer"><img src="" class="horizontalcenter"/></div>

這在死點放置的圖像。

來源

2012-05-21 17:06:07 specialscope

我創建了一個小的jQuery代碼要做到這一點，而不必使用骯髒的表：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> 
imagepos = function() { 
    $('img').each(function() { 
      imgheight = Math.round($(this).height()/2); 
      imgwidth = Math.round($(this).width()/2);  
      $(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;"); 
     }); 
    } 
$(window).load(imagepos); 
</script>

而且你還需要CSS一點點：

div 
{ 
position:relative; 
} 
img 
{ 
display:block; 
margin:auto; 
max-width:100%; 
position:absolute; 
top:50%; 
left:50%; 
opacity:0; 
}

來源

2012-11-04 22:09:52 Ben

這裏是一個跨瀏覽器解決方案：

<div class="img-container"><img src="picture.png" class="cropped"/></div> 


div.img-container { 
    width: 390px; 
    height: 211px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 
img.cropped { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

來源

2012-12-29 21:02:51 ndrizza

使用line-height屬性解決了我的問題。

參考：vertical-align image in div

HTML：

<div class="img_thumb"> 
    <a class="images_class" href="large.jpg" rel="images"><img src="http://www.minfo.pt/fotos/_cache/produtos/0/068.M.976010002__thumbnail_50_50_true_sharpen_1_1.JPG" title="img_title" alt="img_alt" /></a> 
</div>

CSS：

.img_thumb { 
    float: left; 
    height: 120px; 
    margin-bottom: 5px; 
    margin-left: 9px; 
    position: relative; 
    width: 147px; 
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 3px; 
    line-height:120px; 
    text-align:center; 
} 

.img_thumb img { 
    vertical-align: middle; 
}

來源

2013-04-18 15:14:51

垂直對齊固定大小的中心圖像div

回答

相關問題