在頁腳和中心插入圖像

如何在頁腳中插入一個img和h1作爲標題，我正在使用JQuery Mobile。我已經tryed這樣的，但我不能：在頁腳和中心插入圖像

<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>

和CSS：

.imagen_pie{ 
    text-align:center; 
}

我想中心的形象和頁腳上

的H1 [我申請] [ 1]

來源

2014-05-14 user3383415

化妝IMG和H1 inline-block的元素 – shubendrak

謝謝，我該怎麼辦呢？ – user3383415

檢查我的答案。那是你需要的嗎？ – shubendrak

IMG是由默認直列塊元件。你需要做H1也inline-block的

這裏是我的Jsfiddle

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

來源

2014-05-14 16:10:04 shubendrak

將圖像添加到您的jsfiddle並查看，它不會正確對齊，因爲您只將內嵌塊添加到h1。所以，而不是這個邊際：汽車是一個更好的方法來對齊。將來，如果他添加版權p標記，它將在中心對齊。讓解決方案成爲未來的證明並減少修改 – mohamedrias

非常感謝，它的工作原理。但我有一個問題，我如何將2個元素對齊到垂直居中，我已經用圖像編輯了我的問題。 – user3383415

@mohamedrias看到這個小提琴，http://jsfiddle.net/kA96q/3/它會工作。 img默認是一個內嵌塊元素。你不需要指定它 – shubendrak

頁邊距：0 auto爲.imagenpie類應做的工作

來源

2014-05-14 16:04:03

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

這將居中imagen_pie DIV同時包含圖像和H1。

DEMO

來源

2014-05-14 16:10:11 mohamedrias

方法的問題是你需要事先知道你的h1的寬度，那麼只有你可以指定imagen_pie的寬度 – shubendrak

我會用display: inline-block;如下：

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

問候，晏

來源

2014-05-14 16:27:26 Yann

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

注：圖片標籤中取出內嵌樣式。

Demo

問候，伊斯梅爾

來源

2014-05-14 16:54:04 ismailakhtar786

在頁腳和中心插入圖像

回答

相關問題