垂直中心不知道尺寸的圖像

我在我的web開發事業中集中了很多東西，但我想知道是否有一種簡單的方法來垂直居中圖像而不知道圖像的尺寸。想象一下我從數據庫中得到的縮略圖列表。我不希望每個項目都堅持到父div的頂部。垂直中心不知道尺寸的圖像

<div id="wrapper"> 
    <div id="parent"> 
     <img src="path/i/got/from/database/image.png" /> 
    </div> 
</div>

來源

2011-12-29 dreagan

你可以在你的父母使用CSS：

#parent { 
    display:table-cell; 
    vertical-align:middle; 
}

注意，這將使父元素表現得像一個內聯元素。

Example。

來源

2011-12-29 09:09:08 Purag

這工作很好，謝謝！ – dreagan 2011-12-29 12:13:43

那麼，它會使父元素像表格單元格一樣工作。 – user123444555621 2011-12-29 12:14:42

#parent img{vertical-align:middle;}

來源

2011-12-29 09:06:44 Philip

[這不起作用（HTTP：//的jsfiddle。淨/ purmou/596Yg/1 /）。 – Purag 2011-12-29 09:09:45

@Purmou當然可以。你只需要在'＃parent'上設置一個高度。 – Ariel 2012-04-30 20:18:00

-1

您可以使用此：

#wrapper{  
height: 100%; 
min-height: 500px;/*Assuming min-height of the container*/ 
position: relative; 
width: 100%;} 

#parent{  
border: 1px solid; 
height: 50px; 
position: absolute; 
top: 50%; 
width: 50px;}

入住這撥弄過http://jsfiddle.net/kYgqx/2/

來源

2011-12-29 09:16:56 Gurvinder

如果你的設計不允許你做出parent內聯（如果這樣做，使用Purmou的解決方案，它的更好），您可以在parent上設置line-height等於其height和vertical-align: middle;在您的img上。

演示：http://jsfiddle.net/ThinkingStiff/YRGBk/

HTML：

<div id="wrapper"> 
    <div id="parent"> 
     <img src="http://placehold.it/200x200" /> 
    </div> 
</div>

CSS：

img { 
    vertical-align: middle; 
} 

#parent { 
    height:400px; 
    border:1px solid black; 
    line-height: 400px; 
}

輸出：

enter image description here

來源

2011-12-29 11:00:18 ThinkingStiff

有叔瑞克做到這一點，即使沒有Javascript。我們需要知道父母的身高，我們還需要一個標籤。

首先，之前或IMG-標籤後添加SPAN標籤：

<div id="wrapper"> 
    <div id="parent"> 
     <span>&nbsp;</span><img src="path/i/got/from/database/image.png" /> 
    </div> 
</div>

這樣，下面的CSS聲明對準作爲想要的圖像：

#parent { 
    height: 500px;  /* This height is important for the following lines */ 

    line-height: 500px; /* Text-content needs to get full height for the 
          'vertical-align'-attribute to work */ 
} 
#parent span { 
    display: inline-block; /* Should work even for IE6/7 in this case */ 

    height: 500px;   /* Needed for IE */ 

    width: 10px; 
    margin-right: -10px; /* Any element to the right is pushed to the left 
          offset of the SPAN-tag */ 
} 
#parent img { 
    vertical-align: middle; /* Aligns the image in the middle of the SPAN-tag */ 
}

這應該甚至工作對於IE6和7

編輯：

ThinkingStiffs解決方案更簡單，因此更好。我只是不能在IE6中工作。
Purmous解決方案不爲IE6和7的工作，看到The display declaration

來源

2011-12-29 11:01:37 spaark

我發現這一點的同時尋找一個解決方案，該解決方案採用CSS3所以不會對IE8及以下工作類似的問題。

儘管這是一個老問題，我想出一個更新的答案可能是有用的人：

<div id="wrapper"> 
    <div id="parent"> 
     <img src="path/i/got/from/database/image.png"> 
    </div> 
</div> 

#parent{ 
    width:400px; 
    height:400px; 
    background:red; /* just used to highlight box */ 
    text-align:center; 
}  
#parent img{ 
    position:relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

看到這個小提琴：http://jsfiddle.net/E9sTk/

來源

2014-06-02 16:27:37 Studio4

垂直中心不知道尺寸的圖像

回答

相關問題