如何在換行文字的中間對齊圖像

Question

我正在嘗試用一些相鄰的文本包裝圖像，並且可以使用align="" attribute或float將其對齊到左上和右上 。 但是換行后如何將圖像與整個文本的垂直和水平中心對齊。

像這樣：

我試過下面的代碼，

<p>
<img align="middle" src="http://placehold.it/140x100" /> Some More text Here....
</p>

Answer 1

解決方案1

小提琴1為問題中顯示的圖像：

CSS：

html, body
{
    height: 100%;
    width:100%;
    margin:0;
    padding:0;
}
#main{
    width:100%;
    text-align:justify;
    margin:0;
    padding:0;
}
.class1{
    position:absolute;
}
#child1{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-align:justify;
    margin:0;
    padding:0;
    background:url(http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png);
    background-position:50% 50%;
    background-repeat:no-repeat;    
}

---

解決方案2

如果要環繞文本的唯一方法是使用float，請參閱此提琴2

CSS ：

.class1 img{
    float:left;
}

---

解決方案3

但是上述解決方案不允許您將圖像居中。要使圖像居中，您將需要像Fiddle 3這樣的技巧。 但這將需要大量的精力來調整兩個列/ div之間的寫入。

Answer 2

您將無法使用單個文本塊來完成此操作（我無法想到一個在美學上令人愉悅且功能上令人滿意的實例，但我想證明事實是錯誤的），但是您可以使用兩列。 這里有一篇很棒的文章：

http://alistapart.com/article/crosscolumn

本質上，您使用偽元素創建與圖像大小相同的空白空間，然后將圖像放置在該空間上。