垂直和水平居中一個圖像在div中

我發現我的圖像水平和垂直居中圖像。但它不起作用。我的代碼是垂直和水平居中一個圖像在div中

#parent { 
    position : relative; 
    float : left; 
    width : 700px; 
    height : 400px; 
    overflow : hidden; 
    background-color: black; 
} 


#parent img { 
    max-height :400px; 
    max-width : 700px; 
}

高度和圖像的寬度是動態的。

來源

2012-07-06 Diptopol Dam

這樣寫：

#parent { 
    position : relative; 
    float : left; 
    width : 700px; 
    height : 400px; 
    overflow : hidden; 
    background-color: black; 
    text-align:center; 
    line-height:400px; 
} 


#parent img { 
    vertical-align:middle; 
}

入住這http://tinkerbin.com/XYKUzvXu

修訂

入住這http://tinkerbin.com/GL4GaNfo

來源

2012-07-06 10:05:24 sandeep

我認爲這實際工作圖像不論大小，檢查演示出 – Sean 2012-07-06 10:07:14

@anonymousdownvotingislame把任何圖像裏面，它將在中心 – sandeep 2012-07-06 10:07:36

據我所知，這實際上是完全工作。我以前沒有見過像這樣使用垂直對齊方式。。。 – Sean 2012-07-06 10:07:39

出現語法錯誤nax-width : 700px;應該是max-width : 700px;。任何方式使用這個CSS，它會工作，你的不會。

#parent 
{ 
    position : relative; 
    float : left; 
    display: table-cell; 
    width : 700px; 
    height : 400px; 
    overflow : hidden; 
    background-color: black; 
    text-align: center; 
    vertical-align: middle; 
} 
#parent img 
{ 
    max-height :400px; 
    max-width : 700px; 
}

這裏防爆http://jsfiddle.net/ANwmv/

來源

2012-07-06 09:56:10

我不認爲垂直對齊：中間，在這種情況下工作不幸 – Sean 2012-07-06 09:57:01

http://phrogz.net/css/vertical-align/index.html – Sean 2012-07-06 09:57:17

這是行不通的。'vertical-align：middle'不符合你的想法。 – thirtydot 2012-07-06 09:57:38

你應該有

text-align: center

在#parent風格水平對齊的形象，如果我記得正確的話，你還可以設置這個父風格：

line-height: 400px;

這將垂直對齊圖像。

來源

2012-07-06 09:56:35 Sean

這也行不通。問題是圖像的高度是動態的。 – thirtydot 2012-07-06 09:58:05

啊，是的，它確實：/ – Sean 2012-07-06 09:58:55

這是唯一的工作解決方案。 – iambriansreed 2012-07-06 09:59:39

#parent { 
    position : relative; 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
    width : 700px; 
    height : 400px; 
    overflow : hidden; 
    background-color: black; 
} 


#parent img { 
    max-height :400px; 
    max-width : 700px; 
}

來源

2012-07-06 09:57:24

使用display:table-cell和vertical-align:middle和text-align:center

HTML

<div id="parent"> 
    <img src="http://s3.buysellads.com/1241308/100953-1333587587.jpg 
"></div>

的CSS

#parent { 
    position : relative; 
    display:table-cell; 
    vertical-align:middle; 
    width : 700px; 
    height : 400px; 
    overflow : hidden; 
    background-color: black; 
    text-align:center; 
} 


#parent img { 
    max-height :400px; 
    max-width : 700px; 
}

現場演示

http://tinkerbin.com/RDZuJFS7

來源

2012-07-06 09:57:50

嗨，你可以通過display:table-cell;vertical-align:middle; & text-align:center; 看到下面的代碼獲得您想要的結果： -

HTML

<div id="parent"> 
     <img src="http://dummy-images.com/abstract/dummy-107x160-RedDots.jpg" /> 
    </div>

CSS

#parent { 
    display:table-cell; 
    width : 700px; 
    height : 400px; 
    background-color: black; 
    vertical-align:middle; 
    text-align:center; 
} 


#parent img { 
    width : 107px; 
    height : 160px; 
}

看到演示： - http://tinkerbin.com/ajsaa856

來源

2012-07-06 10:02:31

它真是可笑，我認爲他是不檢查的答案大家都把相關答案是從他們身邊，如果他有問題，所以要求我們...... – 2012-07-06 10:10:50

垂直和水平居中一個圖像在div中

回答

相關問題