Setzen Sie Bild in der Mitte der unteren Grenze mit CSS

Question

Alles wird im Titel dieses Beitrags erklärt. Ich versuche, ein PNG-Bild in der Mitte unteren Rand eines div-Elements zu setzen.

.content_block { 
 
    border: ridge; 
 
    border-width: 1px; 
 
    border-color: #969696; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.content_block.orange { 
 
    background-image: linear-gradient(#FBB03B, #FF9933); 
 
}

<div class="content_block orange"></div>

Hier ist ein Bild von dem, was ich versuche zu tun:

ich das Netz nach einer Möglichkeit, dass mit CSS suchte und border-image und so, aber nichts hat funktioniert.

Answer 1

Um die Wirkung den es zu erreichen genau die Grenze in der Mitte zu sein, müssen Sie umfasst die Grenze mit dem Bild von ihm erbt, und machte es unsichtbar. So können Sie damit "rechnen".

Siehe this Fiddle für den Effekt. In dieser Fiddle habe ich ein Pseudo-Element erstellt, das ein Hintergrundbild einer Play-Taste hat.

Die CSS, die der Trick funktioniert, ist dies:

div::after{ 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    width: 30px; 
    height: 30px; 
    background-image: url('http://www.iconsdb.com/icons/preview/gray/video-play-3-xxl.png'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    transform: translate(-50%, -50%); 
    border-top: inherit; 
    border-top-color: transparent; 
} 

ich es auf den absoluten Boden und 50% von der linken Seite platziert haben. Dann habe ich es mit der Eigenschaft transform verschoben, um diese Punkte zu zentrieren (50% von links und 100% von oben);

Um es dann mit der Grenze zu bewegen, erbte ich nur an der Spitze, und machte es unsichtbar.

Answer 2

ein img in html

<div class="content_block orange"> 
     <img class='element' src='https://cdn0.iconfinder.com/data/icons/form-elements-kit/100/checked-green-rounded-01-128.png'/> 
</div> 

Fügen Sie diese in Ihrem CSS hinzufügen.

.element { width:32px; 
       height:33px; 
       display:block; 
       background-color:grey; 
       margin-left:auto; 
       margin-right:auto; 
       margin-top:185px; 
       border-radius:100%; 
} 

Hoffe, dass hilft!

Answer 3

.content-block { 
 
    position: relative; 
 
    width: 200px; height: 100px; 
 
    border: 1px solid #f0f; 
 
} 
 
.content-block img{ 
 
    position: absolute; 
 
    left: 50%; bottom: 0; 
 
    width: 50px; height: 50px; margin: -25px; 
 
}

<div class="content-block"> 
 
    <img src="http://placehold.it/50x50" alt=""> 
 
</div>

Wenn Sie einen relative positioniert Elternteil haben, können Sie die Position eines inneren Kind manipulieren mit position:absolute;

Answer 4

ein Bild in der Orange div Setzen und fügen text-align:center zum div

<div class="content_block orange"> 
    <img src="" height="30" width="30"> 
</div> 

und dannsetzenan die img. Sehen Sie sich diesen Fiddle