insert image on footer and center

Question

How can I center inside a footer a img and h1 for the title, I am using JQuery Mobile. I have tryed like this but I can´t:

<div data-role="footer" class="footer_menu" data-position=fixed>
    <div class="imagen_pie">

        <img  src="../img/btn_compartir.png" alt="main logo"  style="display:inline"/>
        <h1 class="page_footer">bla bla bla</h1>
    </div>
</div>

and the CSS:

.imagen_pie{
    text-align:center;
}

I want center the image and the h1 on footer

![I have apply][1]

Answer 1

img is by default an inline-block element. you need to make h1 also inline-block

Here is my Jsfiddle

.imagen_pie{
text-align: center;
}
.imagen_pie h1 {
display: inline-block;
}

Answer 2

Margin: 0 auto for .imagenpie class should do the work

Answer 3

.imagen_pie {
     width: 25%;
     margin: auto;
}

This will center the imagen_pie div which contains both image and h1.

DEMO

Answer 4

I will use the display: inline-block; as follow:

.imagen_pie img, .imagen_pie h1 {
    display: inline-block;
}

regards, yann

Answer 5

.imagen_pie {
    text-align: center;
}
.imagen_pie img, .imagen_pie h1 {
    display: inline-block;
    vertical-align: middle;
}

Note: Remove inline style on Image tag.

Demo

regards, Ismail