在不同寬度和高度的div內水平和垂直居中圖像

-1

我需要在較大的div內將圖像任一側的向前和向後箭頭居中。 div的寬度和高度根據圖像的大小而有所不同。在不同寬度和高度的div內水平和垂直居中圖像

我有我的工作的一個真人版至今這裏：http://danapaigetrentlage.com/cfsa-comps/lff-aboutgoods.html

而這裏玩一的jsfiddle：http://jsfiddle.net/thwackukulele/4zHyd/ 雖然我不知道有多少使用，這將是沒有鏈接的圖像

您會看到向前和向後的箭頭位於圖像兩側的藍色區域的頂部。我希望它們在這個藍色區域內水平和垂直居中。

我知道我正在使用很多定位，如果有更好的方法來攻擊此佈局，請告訴我。這是我能想到的最好的。我最終將這些佈局交給正在添加數據庫CMS功能的開發人員。所以我的代碼不需要很完美，只需要說明我的意圖，以便他能理解。

感謝您提前提供任何幫助！

來源

2012-03-12 danapaige

.framewrap-fb{ position:relative; } 
.rightarrow, .leftarrow{ position:absolute; top:50%; margin-top:-32px; width:64px; height:64px} 
.leftarrow{left:0} 
.rightarrow{right:0}

來源

2012-03-12 02:31:23

這個中心我的圖像垂直，我決定我不需要他們水平居中。我只是想讓他們從框架外緣的一組30像素。非常感謝！ – danapaige 2012-03-14 15:22:34

不知道我明白這個問題，這是很多代碼來通讀，也許只有在焦點區域發佈的代碼。

嘗試：

.wrapper{ 
     position:relative; 
    } 
    .left_arrow{ 
     position:absolute; 
     left:0; 
     top:50%; 
    } 
    .right_arrow{ 
     position:absolute; 
     right:0; 
     top:50%; 
    }

來源

2012-03-12 02:31:23 Philip

的解決方案是絕對位置在50％，頂部和鏈接，這樣的高度的負一半的保證金頂部的鏈接到div：

http://jsfiddle.net/elclanrs/JKqnm/

HTML：

<div> 
    <img /> 
    <a id="next"></a> 
    <a id="prev"></a> 
</div>

個

CSS：

div { 
    position: relative; 
    height: 300px; /* Set size */ 
    width: 500px; 
    background: blue; 
} 
#prev, #next { 
    position: absolute; 
    width: 24px; 
    height: 24px; 
    top: 50%; 
    margin-top: -12px; 
    background: red; 
} 
#prev { 
    left: -48px; 
} 
#next { 
    right: -48px; 
}

來源

2012-03-12 02:35:38 elclanrs

在不同寬度和高度的div內水平和垂直居中圖像

回答

相關問題