Platziere ein Bild oben auf einem DIV und zentriere es

Question

Ich habe 2 Container, einen grau, einen weiß. Ich möchte ein Bild (das wird ein Dreieck sein) ganz oben auf dem weißen Hintergrund platzieren und horizontal zentrieren. Wie könnte ich das erreichen? Ich habe versucht, die folgenden aber das funktioniert nicht

Siehe https://jsfiddle.net/63s86hf9/

HTML

<section id="services" class="padding-onlytop-lg"> 
    <div class="container"><img src="http://placehold.it/92x45" class="triangle" alt="triangle-greg" width="92" height="45"> 
     <div class="row col-md-10 col-md-offset-1 inner-content padding-onlybottom-lg"> 

CSS:

.triangle { 
margin-left: 0; 
margin-right: 0; 
margin: auto; 
margin-top: -80px; 
} 

Answer 1

Bitte versuchen Sie diesen Code ..

.triangle { 
    display: block; 
    margin: -80px auto 0; 
} 

Answer 2

margin:auto funktioniert nur bei Blockelementen.

.triangle { 
    margin: auto; 
    margin-top: -80px; 
    display: block; 
} 

(Ihre Erklärungen für margin-left und -rechte überflüssig sind, da man sie mit margin: auto in der nächsten Zeile sowieso überschrieben werden.)

Answer 3

Aktualisieren Sie Ihre .triangle Klasse dazu. Sie müssen es als Block anzeigen lassen. Fügen Sie den unteren Rand hinzu, um Platz zwischen Titel und Bild hinzuzufügen.

.triangle { 
    margin: auto; 
    margin-top: -76px; 
    display: block; 
    margin-bottom: 30px; 
} 

Answer 4

.container{ 
 
position:relative; 
 
} 
 
.triangle { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    top: -130px; 
 
}

Answer 5

versuchen, diese

#id{ 
    text-align: center; 
    vertical-align: text-top; 
} 

oder

#id { 
    text-align: center; 
    margin-top:0px; 
} 

Änderungswert von margin-top entsprechend Ihrer Anforderung

Answer 6

Fügen Sie position: relative in .padding-onlytop-lg hinzu. Beispiel

.padding-onlytop-lg { 
    padding-top: 75px !important; 
    position: relative; 
} 

und schreiben in den fließenden Weise

.triangle { 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    top: 0; 
}