Img div and txt(h3) align

Question

我不知道如何对齐这些元素：(与类imgboxpost和H3的div。

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

在imgboxpost中，我具有该div的宽度和高度

Answer 1

使它们内联块：(如果要垂直将它们对齐，请将vertical-align: middle;添加到该CSS规则(

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

Answer 2

在您的代码中添加Twitter bootstrap从此处http://getbootstrap.com/然后在您的代码中添加Bootstrap类

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