使用引導響應網站

當如何定位兒童DIV我是新來引導，響應的網頁設計，並正嘗試爲我的樂隊創建一個頁面，但我遇到的幾個問題。我會嘗試是最好的，我可以在我的情況，我非常感謝任何和所有幫助解釋...使用引導響應網站

我有了樂隊的背景圖像的DIV，我需要它在屏幕居中（無論屏幕的大小）在Bootstrap的容器DIV之一內。在那張圖片的最上面，我有另一張我想要包含的圖片。到目前爲止，我能夠得到這個結果。我遇到的問題是當我試圖將父子DIV中的子DIV定位時。我曾嘗試設置與位置父DIV：相對並用位置的子DIV：絕對，但是當我開始調整屏幕，裏面的圖像突然enlargens和拉伸父DIV之外。此外，當使用此方法並嘗試使用top：75％從父DIV的頂部定位子DIV 75％時;，它會使圖像再次跳出父級並將其放在屏幕的底部。

這裏是我迄今使用，但無法得到工作的代碼。再次，任何幫助都將不勝感激，因爲我是Bootstrap和響應式設計的新手，但我很想把這些東西弄清楚。提前致謝！

我的HTML：

3210

我的CSS：

.bandphoto { 
    position: relative; 
    max-width: 2000px; 
    min-height: 999px; 
    background: url(images/bandphoto.png); 
    background-size: 100%; 
    background-repeat: no-repeat; 
} 

.theband-title { 
    position: absolute; 
    top: 75%; 
}

http://jsfiddle.net/isherwood/w3mgQ

我在這裏幹什麼什麼了嗎？如果是這樣，請告訴我，並隨時教育我，以便我可以更好地理解這些東西。

來源

2014-01-24 DanAdams

上面加了小提琴。看看你是否可以在那裏複製問題。 – isherwood

我想你想避免使用絕對定位（因爲它是很難保持居中），而不要試圖強行引導要素不是在需要的時候。你怎麼想，因爲我沒有尺寸參考定位內圖像這我不清楚，但也許這讓你更接近：

http://jsfiddle.net/isherwood/w3mgQ/3/

.bandphoto { 
    position: relative; 
    max-width: 2000px; 
    min-height: 999px; 
    background: url(http://placehold.it/600x600/333333); 
    background-size: 100%; 
    background-repeat: no-repeat; 
} 
.theband-title { 
    margin: 0 auto 0; 
} 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12 bandphoto"> 
      <img src="http://placehold.it/500x500" class="theband-title img-responsive" /> 
     </div> 
    </div> 
</div>

來源

2014-01-24 17:10:20 isherwood

感謝您的回覆。我們正在接近......我們已經將DIV內部的img class =「theband-title」放在了中心位置。我現在需要做的是垂直放置該圖像...可能75％...從父DIV的頂部。樂隊頭像只有146px高，所以在DIV內應該有足夠的空間將其垂直移動。關於如何在響應式設計中實現這一點的任何建議？ – DanAdams

我試過設置padding-top：75％，但是這會讓圖像在DIV外彈出，這是我不能擁有的。我曾嘗試使用top：75％;這對網站無任何影響。我甚至嘗試了垂直對齊：中間，但也沒有效果。我完全沒有想法。LOL – DanAdams

這是我嘗試過的小提琴，但仍然沒有運氣。但至少你可能會看到我正在使用的div和圖像的一些大小。 http://jsfiddle.net/DanAdams/QN5qv/ – DanAdams

我相信你要找的是什麼display:table和他的朋友們。這裏有一個JSFiddle演示： http://jsfiddle.net/VcFf9/4/

我已經將容器設置爲100％高度，然後垂直對齊背景和單元格的內容。 Bootstrap的網格很適合顯示：table，所以試試吧！：D

來源

2014-01-24 21:58:30 emptywalls

使用引導響應網站

回答

相關問題