圖像的垂直和水平對齊

我有一個佔位符（建設中）的網站，其中只有一個圖像與徽標。我與保證金水平對齊：0自動。但我怎麼知道另外水平對齊圖像。或用一句話：我如何完全集中圖像。圖像的垂直和水平對齊

問候，博多

編輯：對於1:2（高度比寬度）的圖像用：

#wrapper img 
{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 799px; 
    height: 404px; 
    margin: -202px -399px 0; 
    border: 1px solid black; 
}

像在連接的螺紋：）

感謝你的幫助

來源

2012-05-09 bodokaiser

你可以發佈你的標記嗎？ – fcalderan

請在http://jsfiddle.net上發佈您的代碼 – Jhilom

Urm ..你試過了嗎？

<div class='placeholder'> 
    <img src='../images/myimage'> 
</div>

而對於該標記

.placeholder 
{ 
position : absolute; 
top : 50%; 
left : 50%; 
width : 200px; /* Width of the image in question */ 
height : 200px;/* height of the image in question */ 
margin : -100px 0px 0px -100px; 
}

這應該把你的圖像與頁面的最中心的CSS。

來源

2012-05-09 11:48:07

嗨，這適用於從1：1的高度到寬度的正方形我的圖像有1：2（你不知道這個...）。我擺弄結果見開幕式 – bodokaiser

有一個div將與以下規則的圖像：

margin-left: auto; 
margin-right: auto; 
margin-top:200px; <!-- Will depend on your image --> 
width:[your-image-width]px;

將圍繞你的形象

來源

2012-05-09 11:43:55 dtsg

只能水平。 OP也想要垂直;看標題。 –

我的不好。查看編輯。這將做他想做的事情，只需要相應地調整保證金最高規則。 – dtsg

這將做到這一點

img#logo { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100px; 
    height: 100px; 
    margin-left: -50px; 
    margin-top: -50px; 
}

http://jsfiddle.net/DxByM/

來源

2012-05-09 11:47:28 trapper

嗨，這適用於從1：1的高度到寬度的正方形我的圖像有1：2（你不知道這個...）。我擺弄結果看開幕帖子 – bodokaiser

只需更改寬度，高度和邊距以適合，邊距應該是寬度的一半，邊距應該是高度的一半。 – trapper

圖像的垂直和水平對齊

回答

相關問題