Absolute Positionierung für Bilder innerhalb einer Div-Klasse

Wir haben die folgende div-Struktur, wo wir sowohl das Bild als auch den Text innerhalb des Container-Div. Horizontal zentrieren möchten. Allerdings ist das Bild nach links ausgerichtet und nur der Titel ist centered.You den Code unten finden könnte:Absolute Positionierung für Bilder innerhalb einer Div-Klasse

.QHeader { 
 
    position: absolute; 
 
    margin-top: 96px; 
 
    margin-left: 0px; 
 
    width: 800px; 
 
    height: 415px; 
 
    background-image: url('../img/bg_blue_rect.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: left top; 
 
} 
 
#QHeaderImg01 { 
 
    position: absolute; 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-top: 72px; 
 
    width: 263px; 
 
    height: 221px; 
 
    background-color: #0F0; 
 
} 
 
.QHeaderTitle { 
 
    position: absolute; 
 
    margin-top: 324px; 
 
    margin-left: 0; 
 
    width: 800px; 
 
    height: auto; 
 
    text-align: center; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    color: #000; 
 
}

<div class="QHeader"> 
 
    <img id="QHeaderImg01" src="img/q_header_img_01.png" /> 
 

 
    <div class="QHeaderTitle"> 
 
    TITLE 
 
    </div> 
 
    <!--QHeaderTitle--> 
 

 
</div> 
 
<!--QHeader-->

Quelle

2016-10-31 Cemil Tatoglu

Müssen Sie unbedingt alles positionieren? Absolute Positionierung macht das Leben im Allgemeinen schwierig und sollte vermieden werden, es sei denn, es wird tatsächlich benötigt. –

Entfernen Sie einfach Ihre position: absolute; oder es zu position: relative; ändern, da Sie nicht die absolute Positionierung horizontal benötigen, um Ihre Elemente Zentrum:

.QHeader { 
 
    width: 800px; 
 
    height: 415px; 
 
    background-image: url(http://placehold.it/800x415); 
 
    background-repeat: no-repeat; 
 
    background-position: left top; 
 
} 
 
#QHeaderImg01 { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 263px; 
 
    height: 221px; 
 
    background-color: #0F0; 
 
} 
 
.QHeaderTitle { 
 
    margin-top: 50px; 
 
    width: 800px; 
 
    text-align: center; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    color: #000; 
 
}

<div class="QHeader"> 
 
    <img id="QHeaderImg01" src="http://placehold.it/263x221/0c0" /> 
 

 
    <div class="QHeaderTitle"> 
 
    TITLE 
 
    </div> 
 
    <!--QHeaderTitle--> 
 

 
</div> 
 
<!--QHeader-->

Quelle

2016-10-31 13:08:15 andreas

Danke an alle Befragten, die anderen beiden Antworten führten mich auch zu dem Ergebnis, aber leider würde ich nur eine Antwort als Lösung markieren. –

nur

ändern

#QHeaderImg01 { 
    position:absolute; 
}

#QHeaderImg01 { 
    position:relative; 
}

und von cource, entfernen Sie die große Marge-top

Quelle

2016-10-31 13:07:53 FalcoB

div.container { 
 
    height: 10em; 
 
    position: relative } 
 
div.container p { 
 
    margin: 0; 
 
    
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
\t } 
 
IMG.displayed { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
\t }

<body> 
 
<div class=container> 
 
<IMG class="displayed" src="http://labs.qnimate.com/slider/1.jpg" alt="..."> 
 
    <p>Centered! 
 
</div>

oder

IMG.displayed { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
\t } \t 
 

 
div.container { 
 
    height: 10em; 
 
    position: relative } 
 
div.container p { 
 
    margin: 0; 
 
    
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
\t }

<IMG class="displayed" src="http://labs.qnimate.com/slider/1.jpg" alt="..."> 
 
<div class=container> 
 
    <p>Centered! 
 
</div>

Quelle

2016-10-31 13:15:55

Absolute Positionierung für Bilder innerhalb einer Div-Klasse

Antwort

Verwandte Themen