如何將圖像垂直和水平放置在中間/中間位置

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;"> 
<img src="bla.jpg"> 
</div>

如何使圖像從此框中間開始？（中間縱向和橫向）如何將圖像垂直和水平放置在中間/中間位置

來源

2011-02-03 Karem

如果你不需要圖像內聯，你可以考慮將它添加到背景位置：中心和背景重複：無重複的div背景。 – 2015-01-14 18:32:43

有幾種方法可以做到這一點，如果它需要在所有的瀏覽器（IE7 +，其餘的）工作，你需要做不同的事情，使之在某些情況下工作。

使用絕對位置。這隻有在知道圖像大小的情況下才有效。在這裏，您將其設置爲position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>。

在這裏看到的例子：http://jsfiddle.net/JPch8/
使用margin: 0 auto;text-align: center;和line-height/font-size。這是一個更棘手的問題，因爲行高不能像在圖像內嵌塊元素的IE中那樣工作。這就是字體大小的來源。基本上，您將圖像容器的行高設置爲與容器的高度相同。這將垂直對齊內聯元素，但在IE中，您需要設置字體大小，以使其工作。

見這裏的例子：http://jsfiddle.net/JPch8/2/
在支持display: flex您可以通過div容器在這裏簡單地設置爲display: flex; align-items: center; justify-content: center;

見例做到這一點的現代瀏覽器：https://jsfiddle.net/ptz9k3th/

來源

2011-02-03 15:37:14

-2

我希望我明白你想達到的目標。

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;"> 
<center><img src="bla.jpg" style="vertical-align:middle;"></center> 
</div>

來源

2011-02-03 15:35:32

-1使用中心標籤。你剛剛殺死了2只小貓:( – 2011-02-03 15:38:58

@Caspar Kleijne你說得對，我真的不知道如何將圖像置於CSS中，我知道text-align：center，但它對圖像有效嗎？謝謝 – 2011-02-03 15:39:58

「float:left; position:relative 「可能無法按預期工作。浮動元素被認爲是絕對的。

要讓圖像垂直居中，您需要div上的高度，並且您需要父母身高。（垂直居中是一種痛苦）。我的下面的例子將工作，如果這些是你唯一的元素，但要注意容器上的height: 100%可能會影響你的佈局的其餘部分。

<html> 
<head><title></title> 
<style type="text/css"> 
html, body { 
    height: 100%; 
} 

#photo_leftPanel { 
    height: 500px; /*guessing*/ 
    width: 604px; 
    float: left; 
} 

#photo_leftPanel img { 
    margin: auto; 
    vertical-align: middle; 
} 
</style> 
</head> 
<body> 
<div id="photo_leftPanel"> 
<img src="bla.jpg" /> 
</div> 
</body> 
</html>

來源

2011-02-03 15:43:36 Cfreak

把與text-align:center;一個<div>圖像，而無需指定框

<div class="picture_div" style="margin:0px auto; text-align:center;"> 
    <img src="media/BezierCurve.gif" /> 
</div>

或者你可以指定width的大小和<div>箱，以居中的圖像height（實際上是div框）。

<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;"> 
    <img src="media/BezierCurve.gif" /> 
</div>

來源

2015-07-07 02:56:02

如何將圖像垂直和水平放置在中間/中間位置

回答

相關問題