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>

引导程序将文本和图像对齐

1 个答案: