How to center an icon image inside another image?

Navigation
0

I have an image format icon (.png) which I want to center on an image as such, but I can not center it, the image of the icon I added it in a ** and then there is the background image, but I have not grappled with the exact position in the center. annex the html code and later the css ...

THIS IS THE HTML CODE where the icon of the image is first and the second the image of the background 

  <div><img src="http://www.legacycitychurch.com/media/cover_art/Play%20Button%20Overlay/playbutton.png" style="
    display: block;
    margin-left: auto;
    width: 50%;  
    position: absolute;>">
</div>
<img src="https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:250,height:200,fit:scale/http://areametropolitana.softwareestrategico.com/PublishingImages/Paginas/Forms/AllItems/Nairo.jpeg" class="img-size" alt="undefined">

I would like to know what forms there are to center that image inside an image ...

    
asked by Joe Pulgarin 09.08.2018 в 15:41
source

2 answers

0

<div style="position:relative">
<img src="https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:250,height:200,fit:scale/http://areametropolitana.softwareestrategico.com/PublishingImages/Paginas/Forms/AllItems/Nairo.jpeg" width="268" hspace="16" height="268" vspace="16" />
<div style="position:absolute; top:0; left:0;">
<img border="0"  src="http://www.legacycitychurch.com/media/cover_art/Play%20Button%20Overlay/playbutton.png" width="300" height="300"/></div></div>
this is another way if you want to place the image of the smaller player 

<div style="position:relative">
<img src="https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:250,height:200,fit:scale/http://areametropolitana.softwareestrategico.com/PublishingImages/Paginas/Forms/AllItems/Nairo.jpeg" width="268"/>
<div style="position:absolute; top:30%; left:10%;">

<img border="0"  src="http://www.legacycitychurch.com/media/cover_art/Play%20Button%20Overlay/playbutton.png" width="100" height="100"/>
</div>
</div>
    
answered by 09.08.2018 / 15:55
source
0

You can use relative and absolute positioning to superimpose the images.

I have chosen to center the image with respect to the relative div. The style "display: inline-block" prevents the control does not occupy the full width (as would happen if your display took the value "block"), but only the one you need to contain your children.

Then we center the image using the well-known technique that uses top, left and transform. I recommend reading link to know all the techniques in depth.

Yes, the cat is the supposed icon to center. 

<div>
    <div style="display: inline-block; position:relative">
        <img src="https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:250,height:200,fit:scale/http://areametropolitana.softwareestrategico.com/PublishingImages/Paginas/Forms/AllItems/Nairo.jpeg" width="268" hspace="16" height="268" vspace="16" />
        <div style="display: inline-block; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%)">
            <img border="0" src="http://placekitten.com/50/50"/>
        </div>
    </div>
</div>

Greetings

    
answered by 09.08.2018 в 20:04
because the data is not saved the first time I save it, but if it is saved the second time? Export sql server records to several excel files