html - Bootstrap 对齐文本和图像

Question

我正在尝试在卡片盒中内嵌 div，并且也在这样做。但是文本在旁边垂直居中。无法管理使文本从顶部开始。

<div class="card text-left">
       <div class="card-header">
           <ul class="nav nav-tabs card-header-tabs">
                 <li class="nav-item">
                   <a class="nav-link active" href="#">Active</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link disabled" href="#">Disabled</a>
                                </li>
               </ul>
            </div>
         <div class="card-body">
      <div class="d-inline"><img src="{{$estate->image}}" id="image"></div>
    <div class="d-inline">{{$estate->building_name}}</div>
 </div>
</div>  

尝试使用d-inline 来使图像和文本并排。但这次文本是垂直对齐的。

Answer 1

你必须使用 d-inline-flex 和 align-top

<div class="card-body">
    <div class="d-inline-flex"><img src="{{$estate->image}}" id="image"></div>
    <div class="d-inline-flex align-top">{{$estate->building_name}}</div>
</div>