如何将文本内嵌与图片对齐？

Question

如何像这样对齐图片下的文字？

这是代码： https://jsfiddle.net/vzjj9eLy/

HTML：

<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="asd" width="316" height="316">
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span>

的CSS：

.test{
  display:block;

}
.test img{
  display:block;
  position: relative;
    left: 50px;
}

Answer 1

这是你想要的吗？

<强> HTML：

<span class = "test">
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="asd" width="316" height="316">
    <span class="test_text">
        Lorem Ipsum is simply dummy text of the printing and typesetting 
        industry. Lorem Ipsum has been the industry's standard dummy text ever since 
        the 1500s, when an unknown printer took a galley of type and scrambled it to 
        make a type specimen book. 
    </span>
</span>

<强> CSS：

.test{
  width: 50%;
}
img{
  float: right;
}
.test.test_text{
  float: left;
}

您可以看到它有效Layout being shown in Android Studio

Answer 2

我能想到的最简单的方法，我只是用一个表来给你一个想法，但是你应该使用div并在左边设置一个边距。

 <span class="test2"><img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&amp;a" alt="asd" width="316" height="316" /></span>
    <table width="510" height="100" border="0">
      <tr>
        <td width="63" height="96">&nbsp;</td>
        <td width="437"><span class="test111">Lorem Ipsum is simply dummy text of the printing and typesetting 
          industry. Lorem Ipsum has been the industry's standard dummy text ever since 
          the 1500s, when an unknown printer took a galley of type and scrambled it to 
          make a type specimen book. </span></td>
      </tr>
    </table>

Answer 3

要对齐左侧的文本，然后对齐图像，您可以使用 div 元素创建它。 请在下面找到我附加的css内联代码 -

<div style="width:48%;float:left;vertical-align:bottom;margin:0px;">        
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</div>
<div style="width:50%;float:right;vertical-align:top;margin:0px;">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="asd" width="316" height="316">
</div>