align image to center on another image

Question

I’m developing a site like portifolio, I’m using wordpress and bootstrap, I created a div and within this I put an img tag with the background image of this div, but now I want to put an image of my logo superimposed on the background, using some css properties until I can put it overlay but I can’t align it to the center

my code is like this:

<div class="img-fundo">
    <img class="img-logo" src="<?php bloginfo('template_directory') ?>/assets/images/logo.jpg" alt="">
    <img class="img-fundo img-responsive" src="<?php bloginfo('template_directory') ?>/assets/images/header.jpg" alt="">
</div>

css is like this:

.img-fundo{
    display: block;
}

.img-logo{
    position: absolute;
    magin-left: auto;
    margin-right: auto;
}

it overlaps but does not align to the center. how should I proceed?

Answer 1

Have you ever tried to put a div inside the "img-background" and in it you put the image of your logo? I think it could work, using CSS to centralize it and even a class.

Answer 2

You can do this using jquery:

    <div class="img-fundo">
        <img id ="imgFundo" class="img-fundo img-responsive" src="..." alt="">
        <img id ="imgLogo" class="img-logo" src="..." alt="">

    <script>
        var fundo = $( "#imgFundo" );
        var logo = $( "#imgLogo" );

        logo.css("padding-top", fundo.height()/2 - logo.height()/2);
        logo.css("padding-left", fundo.width()/2 - logo.width()/2);
    </script>
</div>

Answer 3

One of the ways to center an element with CSS, with absolute position, is to use the left with 50% and margin-left with negative half of the element width, this ensures that it will always be in the center.

To align the logo to the center discover the width width of this image and change the class in CSS to something like this:

.img-logo{
    position: absolute;
    left: 50%;
    magin-left: -50px; //-50px se a logo tiver largura de 100px
}