如何在包装文本的中间对齐图像

Question

我正在尝试使用某些相邻文字换行图片，然后我可以使用align=""属性或float将其与左上角和右上角对齐。但是如何在包装后将图像与整个文本的垂直和水平中心对齐。

像这样：

我试过下面的代码，

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

Answer 1

解决方案1 ​​

Fiddle 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.See this Fiddle 2

<强> CSS ：

.class1 img{
    float:left;
}

---

解决方案3

但上述解决方案不允许您将图像居中。对于居中图像，您将不得不这样做 像Fiddle 3这样的一些技巧。但这需要花费大量精力来调整两列/ div之间的写入。

Answer 2

你不能用一个单独的文本块来做（我想不出一个单一的例子，它在美学上令人愉悦并且在功能上是可取的，但是我很乐意被证明是错的），但是你可以有两列。这里有一篇很棒的文章：

http://alistapart.com/article/crosscolumn

基本上，您使用伪元素创建一个与图像大小相同的空白空间，然后将图像定位到该空间。