Bild zwischen den Containern zentrieren, während die Antwort beibehalten wird

Question

Wie kann ich ein Bild über dem anderen hinzufügen und die Ansprechempfindlichkeit beibehalten? Grundsätzlich brauche ich ein Bild, das zwischen einem Bild und einem Container zentriert ist. Ich benutze Bootstrap.

Angehängter Screenshot.

Ich versuchte verschiedene Varianten mit float, position: absolute; und so weiter, aber nichts schien zu funktionieren, wenn der Bildschirm in der Größe geändert wurde.

Ich habe versucht, Informationen darüber zu finden, aber ehrlich gesagt habe ich keine Ahnung, wie ich das Problem formulieren soll, damit ich eine Antwort finde.

-Link: http://euro-tax.connectmedia.ro/

Answer 1

Mit position:absolute können Sie calc Eigenschaft Position eines Elements zu definieren. Sie müssen nur etwas berechnen. In meinem Fall setze ich left:calc(50% - 21px), es bedeutet 50% - half-width of element. Dadurch wird die Position des Elements in der Mitte eines übergeordneten Elements in einem beliebigen Ansichtsfenster festgelegt.

div{ 
 
    position:relative; 
 
} 
 
.absoluteImage{ 
 
    position:absolute; 
 
    bottom:15px; 
 
    left:calc(50% - 21px); 
 
}

<div> 
 
    <img style="width:100%" src="http://euro-tax.connectmedia.ro/wp-content/themes/euro-tax/images/xheader-bg.jpg.pagespeed.ic.CWwqtcTBRJ.jpg"> 
 
    
 
    <img class="absoluteImage" src="data:image/webp;base64,UklGRm4BAABXRUJQVlA4TGEBAAAvKkAFEF9CEAgSyftj7TIEQbZNQeYv9oMQZNuUeee4s8K2bdtcZDvdzaxar35AAAIAIBAEwzCCBjA2jEAwGgcgGGiA4GMhmGgIDwIwGgMDD4IAggYwwAQAgRBMAKNhBEAQeEBsJEmRVL3H/H/MzMxMz9D++7MwPbsmRPQ/YdZuP4skvJOdnP/c6mQaXbavGXgmK3Nlu2sMWXkvwyuZpTdWhp+s/jXhkZp/rH5uWA588OLrs9wkdixnEbhHZiy3CYSnLA8puKX2LKdhgmn0WN6z0GfvLHsGmbAb3yw+KtBVPlh8N8iGU3yy+G9Btv5ZPIvkQElfWI78cPwjlpc0KVDja5bLKKzokuU6TipEcMLylA/lTywnQRKQRoe9dQyS0NW+2P2rRjpoCw92exRAOuhfz6w/v8AkHVxiK9atYrBIB7fAmOU4AJt0cG+z2oZCOniofrD1UYVKOnjJHX+POQjSAQA=" > 
 
<div>

Answer 2

Try this:

den Anker bewegen HTML aus .bannerbox wie show-more es unten und fügen Klasse gezeigt.

Für ansprechende Ansicht einstellen background-position Wert von .bannerhead und .show-more Klassenwert das gewünschte Ergebnis in der mobilen Ansicht erhalten mit Abfragen Medien.

HTML:

<div class="bannerbox col-md-8"> 
    <h1>Recuperarea Taxelor si 
       Alocatiilor din strainatate</h1> 

    <p style="font-weight:300;">Ai obtinut venituri din strainatate? Înseamna ca poti obtine restituirea impozitelor platite acolo.<br> Dar si alocatiile europene, ori alte taxe si asigurari pot fi recuperate. Afla acum ce drepturi ai si solicita înapoisuma maxima posibila.</p> 

</div> 
<a href="#section2" rel="m_PageScroll2id" class="_mPS2id-h mPS2id-highlight mPS2id-highlight-first mPS2id-highlight-last show-more"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAWCAMAAABuZ5WBAAAA5FBMVEXjHnL////jHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnL1kVINAAAAS3RSTlMAAAEDBAYHCAkNDxEUFxoeIyQnMDM3OTxBS0xQVltcYG11eYCFh5OVlpmepKq2uLq7v8TFyMnQ0dLW2Nzj5Ofs7/P09vj5+vv8/f6BxUE3AAABG0lEQVQoz43T11bCYBAE4NlQpKN0hUhXqlIs9GIowr7/+3hBsqSQHPcqM/Odk6sfgLo8vifgdkREibfj8pkISoOZeZH2sOkFM3NDQYuZmfnnydU+bi+khd3lg08VF1s56WKHMRv36rtBfS+yjxH/lNAPO2i4L+tHHAj1JH4nbTT5JVsvRACUphSrjIVmVrI0FSIAQPlgVFrRRIuaUR/KRLpFYWO056rQ6tkoNwW6WqTm8re2HwDgb0szT5HZIjaSaRABEBlIHsXIahHsyjjN3eWmkrpBslsodb51dYWcFlD3DrlXiW5a5Nc2us7DzeJhZqGze7hbRIcmOozCyyLQEdoJwNsCNZ3Wrm/I1aKkMbNWwn8sspPfSRZO+wc672iCowb7mQAAAABJRU5ErkJggg==" 
    class="center-block" style="padding-bottom:10px;" data-pagespeed-url-hash="1407470906" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"></a> 

CSS:

.bannerhead { 
    background-image: url("/wp-content/themes/euro-tax/images/xheader-bg.jpg.pagespeed.ic.CWwqtcTBRJ.jpg"); 
    background-size: cover; 
    background-position: center 68%; 
    position: relative; 
} 

.show-more { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

Answer 3

Sie könnten versuchen, ein Raster-Layout verwenden. Erstellen Sie ein umschließendes div und platzieren Sie Ihren Container, das Bild und das Bild als untergeordnete Elemente. Verwenden Sie dann die Rasterlayout-Eigenschaften, um sie zu zentrieren.

Html

<div id="grid-container"> 
    <img src="#" id="img1"> 
    <img src="#" id="center-img"> 
    <div id="container"></div> 
</div> 

Css

#grid-container { 
    display: grid; 
    grid-template-rows: 1; 
    grid-template-columns: auto 10px auto; 
} 

center-img { 
    width: 10px; 
    height: 10px; 
} 

Hinweis: Dies wird nicht für jeden Browser arbeitet zur Zeit, da die Raster-Layout-Funktion muss manuell aktiviert werden.

Answer 4

Set position:relative in Ihrem Elternelement

div.bannerhead { 
    position: relative; 
} 

Dann stellen Kind-Element wie folgt aus:

<div classs="bannerhead"> 
    <img class="center-block" src="" > 
</div> 

Sie nun CSS für absolute oder untergeordnetes Element etwas wie folgt aus:

img.center-block { 
    position: absolute; 
    bottom: -30px; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    z-index: 99; 
    cursor: pointer; 
} 

Sie können diese Regel in jedem neuen Element anwenden. Ich habe getestet, um diese Regel anzuwenden und es funktioniert für mich.