定位文字和图像

Question

如何定位宽度为30px，高度为30px且旁边有2条线的图片，以便这两条线在30px高度范围内相互匹配？

我已经安装了Bootstrap，如果有帮助的话。

<p>
  <img src='pic1.png' width='30' height='30'/> <a href='#'>E"nola Kuhic (wiu)</a>
  person
</p>

Answer 1

考虑使用Bootstrap＆＃39; media object。

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <a href="..." class="media-heading">E"nola Kuhic (wiu)</a>
    person
  </div>
</div>

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="media">
  <div class="media-left">
    <img class="media-object" src="https://placehold.it/40x40">
  </div>
  <div class="media-body">
    <a href="#" class="media-heading">E"nola Kuhic (wiu)</a> 
    <div>person</div>
  </div>
</div>


<div class="media">
  <div class="media-left">
    <img class="media-object" src="https://placehold.it/40/AFA">
  </div>
  <div class="media-body">
    <a href="#" class="media-heading">John Doe</a> 
    <div>admin</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<p>
  <img src='pic1.png' width='30' height='30' style='float:left;'/>
  <a href='#'>E"nola Kuhic (wiu)</a><br />
  person
</p>