Zentriere ein div auf der Oberseite des responsiven Bildes mit Bootstrap

Ich versuche, ein Div (mit einigen vertikalen Tasten) über ein Bild, das zentriert und ansprechend ist (dieses Bild ist nicht das Hintergrundbild) Ist es möglich, dies mit zu tun Bootstrap? Ich möchte immer noch, dass dieses Bild den größten Teil der Bildschirmbreite einnimmt und eine Bildunterschrift nicht funktioniert. Wenn Sie ein weiteres div hinzufügen, wird dieses Bild aus der Mitte verschoben?Zentriere ein div auf der Oberseite des responsiven Bildes mit Bootstrap

Der HTML-Code für das Bild ist wie folgt:

<div class ="container"> 
    <div class="col-lg-12"> 
      <img src="bg2.png" class="img-responsive center-block" id="buildingimg" alt="..." > 
    </div> 
</div>

Quelle

2016-05-05 Alison1988

Können Sie den Code (so weit wie Sie haben) für beide Bilder in der Frage? Es hat derzeit nur Code für ein Bild. – Amber

Es ist kein anderes Bild es ist nur eine div Breite eine Breite von "60px" und Höhe von "200px" – Alison1988

Danke, können Sie auch die CSS hinter den 'img-responsive' und' center-block' Klassen, für den Fall sie beeinflussen das neue div? – Amber

http://codepen.io/ruchiccio/pen/wGRXWB

Hier sind einige Tasten in einem div ein Bild überlappt.

#button-overlay {position:absolute; top:0; right:0; left:0; margin-left:auto; margin-right:auto; z-index: 5; width:100%; text-align:center;} 

button {width:90%; margin-right:auto; margin-left:auto; display:block;} 

img {width:100%;}

Quelle

2016-05-05 15:17:00

Zentriere ein div auf der Oberseite des responsiven Bildes mit Bootstrap

Antwort

Verwandte Themen