無論瀏覽器窗口大小如何，我都會將圖片保留在頁面中央？

我想僅使用CSS + HTML來做到這一點。它必須在所有主要/最新的瀏覽器中工作 - 而不是IE 6。無論瀏覽器窗口大小如何，我都會將圖片保留在頁面中央？

我的代碼如下：

<div id="left_arrow"> 
     <img src="images/left-arrow.png"> 
    </div> 

#left_arrow { 
    position: absolute; 
    left: 0px;   
    margin: 10px 0 15px 0; /* top, right, bottom, left */ 
    padding: 5px 5px 7px 5px; /* top, right, bottom, left */ 
}

我想這樣做的位置爲「絕對」，但如果瀏覽器的大小改變箭頭不動，我希望它永遠是在無論大小如何，瀏覽器的中心。

編輯：

我希望它永遠是在這個div的中心：

<div id="images" width="100%"> 
     <img src="image1.jpg" width="45%"> 
     <img src="image2.jpg" width="45%"> 
</div>

這是整個代碼塊，這是內：

<div id="compare_view" align="center"> 

    <div id="compv-navbar"> 
     <a href="#"><img src="icon1.png" id="icon1"></a> | 
     <a href="#"><img src="icon2.png" id="icon2"></a> | 
     <a href="#"><img src="icon3.png" id="icon3"></a> | 
     <span id="view_name"> text </span> 
    </div> 

    <div id="left_arrow"> 
     <img src="images/left-arrow.png"> 
    </div> 

    <div id="right_arrow"> 
     <img src="images/right-arrow.png"> 
    </div> 

    <div id="images" width="100%"> 
     <img src="image1.jpg" width="45%"> 
     <img src="image2.jpg" width="45%"> 
    </div> 

    <div id="notice"> 
     Notice will be here. 
    </div> 

</div>

編輯2：如果沒有CSS解決方案，jQuery解決方案也很好。

編輯3：仍然沒有接受者？凹凸

來源

2010-08-02 marcamillion

如果您有任何周圍的圖像更爲定位後完整的代碼。 – 2010-08-02 03:13:36

我剛更新了CSS。左邊：0;是準確的。這只是把我拋棄的高度。所以，以Y軸爲中心（如果這就是你說的x和y中心的含義）。我想'左箭頭'垂直居中（即沿Y軸）與ID =圖像的div。 – marcamillion 2010-08-02 04:04:11

你可以請包括一個完整的演示與jsfiddle.net？如果人們可以玩弄某些東西，人們會更有動力。我知道我更有可能嘗試這種方式，如果你這樣做:) – 2010-08-02 23:43:54

我已經使用「文本對齊：中心」水平居中成功。對於垂直居中，試試這個：

.vBox {min-height: 12em; display: table-cell; vertical-align: middle; } 

<div class="vBox"> <p>Lorem Ipsum is simply dummy text </p> </div>

乾杯，埃裏克

來源

2010-08-02 03:23:42 Erik

那麼......那對我沒有用。 – marcamillion 2010-08-02 03:33:26

請記住，我正在嘗試在div中居中放置一個圖像，本質上是將div對齊。不只是文字。 – marcamillion 2010-08-02 04:01:27

無論瀏覽器窗口大小如何，我都會將圖片保留在頁面中央？

回答

相關問題