CSS圖像定位中心

我有問題與定位圖像CSS圖像定位中心

<div class="foto img-thumbnail"> 
    <img class="img-thumbnail tengah" src="member/37/foto_profile/profile37.png"> 
</div>

CSS文件

.foto { 
background-image: url('member/37/foto_profile/large.jpeg'); 
height: 300px; 
background-repeat: no-repeat; 
background-size:cover; 
background-position: 
center center; 
width: 100%; 
} 
.tengah { 
position: absolute; 
}

preview

GREEN = 類登加

RED = 類照片

我想要的圖像的div

的（RED）定位中心當我改變的CSS等

.tengah { 
left: 50%; 
top: 50%; 
position: absolute; 
}

其返回圖像的中心 preview1

任何人都可以幫助我？

感謝之前:)

來源

2014-01-16 Faytraneozter

tengah圖像的定義寬度和高度？ – davidpauljunior

不，tengah寬度圖像60px：60px – Faytraneozter

不確定你到底想要什麼嗎？你想要將紅色中心本身居中，還是將綠色中心放在紅色中心？ – davidpauljunior

我想你在談論的.foto定心.tengah股利。

如果是這樣，那麼你需要：

.foto { 
    background-image: url('member/37/foto_profile/large.jpeg'); 
    height: 300px; 
    background-repeat: no-repeat; 
    background-size:cover; 
    background-position: 
    center center; 
    width: 100%; 
    position: relative; /* ADDED */ 
} 

.tengah { 
    left: 50%; 
    top: 50%; 
    position: absolute; 
    margin-top: -30px; /* ADDED */ 
    margin-left: -30px; /* ADDED */ 
}

的利潤率的寬度，你想爲中心的<div>的高度的一半。

來源

2014-01-16 04:17:21 davidpauljunior

，將適應不同尺寸屏幕清潔的方法是避免「的位置是：絕對的」共設置自動利潤率向左和向右的.tengah類：

.tengah { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    top: 50%; 
}

這個樣式類將自動以圖片/ div爲中心。如果不使用「垂直對齊」，則可以根據圖像長度稍微調整「頂部」。

來源

2014-07-20 20:29:55

CSS圖像定位中心

回答

相關問題