IMG div要素とTXT（H3）

Question

を合わせ、私はこれらの要素を整列する方法がわからない：（クラスimgBoxPostとH3とのdiv imgboxPostで

<div class="panel-body"> 
    <div class="imgBoxPost"> 
     <img src="img/<?php echo $_SESSION['image']; ?>" class="imgFitInTheBox imgRadius"> 
    </div> 
    <h3><?php echo $_SESSION['username'] ?></h3> 
</div> 

を私は幅と高さを持っています。そのdiv要素の

Answer 1

それらインラインブロック行います。 （あなたが垂直方向の中央にそれらを整列する場合は、そのCSSルールにvertical-align: middle;を追加）

.panel-body .imgBoxPost, 
 
.panel-body h3 { 
 
    display: inline-block; 
 
}

<div class="panel-body"> 
 
    <div class="imgBoxPost"> 
 
     <img src="http://placehold.it/60x90/fb5" class="imgFitInTheBox imgRadius"> 
 
    </div> 
 
    <h3>This is an H3 element</h3> 
 
</div>

をここ http://getbootstrap.com/ から

Answer 2

あなたのコードのダウンロードブートストラップで追加Twitterのブートストラップは、あなたのコード内であなたが整列するレイアウト

<div class="panel-body row"> 
<div class="col-md-12"> 
    <div class="imgBoxPost col-md-6" > 
     <img src="img/<?php echo $_SESSION['image']; ?>" class="imgFitInTheBox imgRadius"> 
    </div> 
    <div class="col-md-6"> <h3><?php echo $_SESSION['username'] ?></h3></div> 
</div> 
</div>