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;
}
문제
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]
해결책
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;
}
다른 팁
Margin: 0 auto for .imagenpie class should do the work
.imagen_pie {
width: 25%;
margin: auto;
}
This will center the imagen_pie div which contains both image and h1.
I will use the display: inline-block;
as follow:
.imagen_pie img, .imagen_pie h1 {
display: inline-block;
}
regards, yann
.imagen_pie {
text-align: center;
}
.imagen_pie img, .imagen_pie h1 {
display: inline-block;
vertical-align: middle;
}
Note: Remove inline style on Image tag.
regards, Ismail