テキストと画像の配置

Question

30px幅と30px高さの画像を2列で配置すると、これらの2本の線が同じ高さになります（30px内）。

それに役立つことができれば、私はすでにブートストラップがインストールされています。

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

Answer 1

ブートストラップの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> 

<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>

Answer 2

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