用jQuery將文字內部的圖像水平對齊

我有一個div，其中包含一篇文章。我的意思是，它可能包含文字和圖像。類似這樣的：用jQuery將文字內部的圖像水平對齊

Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
Blah Blah Blah Blah Blah Blah Blah Blah. 
{IMAGE} 
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah. 
{IMAGE} 
Blah Blah Blah Blah Blah Blah Blah Blah.

因此，在每張圖片周圍都可能沒有div。

但我想用jQuery水平對齊圖像的中心。我的想法是創建一個具有特定類的每個圖像（與jQuery）的div。

但我不知道如何做到這一點在jQuery中。

如何做到這一點？或有沒有更好的方法？

編輯：該內容是從另一個網站的源下載的。我想要將圖像中心水平對齊。

來源

2012-08-27 Mahdi Ghiasi

爲什麼-1？！？?? –

你是否試圖在div中添加圖像，如下所示： $ div = $（'div'）; $ div.addClass（'test'）; $ div.append（''）; 這看起來像這樣：

– insomiac

@Aby，在HTML中已經有一個圖像標籤。我希望jQuery能夠檢測到它們，並在它後面追加類似'

' before it and '

'的東西。 –

無需添加各地的img只能通過CSS來完成股利

嘗試這個fiddle

只需使用display:block和margin:auto

來源

2012-08-27 05:04:22 Champ

您的解決方案非常簡單，而且工作正常！非常感謝你！ –

你總是歡迎:) – Champ

@MahdiGhiasi：理所當然，但我回答的確切是你最初尋找^^ – khaverim

你的html是這樣的嗎？

<div id="container"> 
    <div id="column1"> 
     article text article text 
     <img /> 
     article text article text 
    </div> 
    <div id="column2"> 
     article text article text 
     <img /> 
     article text article text 
    </div> 
    <div id="column3"> 
     article text with no image 
     article text with no image 
     article text article text 
    </div> 
</div>

來源

2012-08-27 05:02:08 Julian

是的，但''div id =「columnx」>'可能不存在。 –

我認爲，除非有一些瘋狂的佈局情況，否則用CSS代替jquery會更好。 – Julian

問題已更新。 –

你可以做這樣的事情：

你的情況：

追加$（$（ '＃圖像1' ））;（」測試'）。

在jQuery中你也可以使用包裝方法： http://api.jquery.com/wrap/

例如：$（ 'IMG'）包裝（ '<div class="test"></div>'）。

來源

2012-08-27 05:03:08 insomiac

對不起，我沒有得到你所說的。還有問題更新 –

你想「創建一個具有特定類的每個圖像（與jQuery）的div」。儀式？ – insomiac

感謝您的更新。 –

jQuery來包裝所有<img>標籤與<div class="imageclass">：

$('img').wrap('<div class="imageclass" />');

CSS以居中<div> ：

.imageclass { margin: 0 auto; }

來源

2012-08-27 05:07:13 khaverim

謝謝。我在jsfiddle中試過你的代碼：http://jsfiddle.net/8fe6S/2/你的jQuery工作完美，但你的CSS應該是：'.imageclass {text-align：center; ''我想。 –

@MahdiGhiasi'margin：0 auto;'應該在瀏覽器中工作; jsFiddle在CSS上並不是萬無一失 – khaverim

用jQuery將文字內部的圖像水平對齊

回答

相關問題