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规则中）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

从此处http://getbootstrap.com/添加代码下载引导程序中的twitter bootstrap 然后在代码中添加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>

Img div和txt（h3）对齐

2 个答案: