Php 使用Laravel和Css将单个或多个图像或div作为一个整体居中对齐

因此，我尝试对齐标志和它们各自的工具提示。我尝试了很多我知道的方法，但似乎没有一种能得到我想要的结果

下面您可以看到我正在做的事情的快速快照，我可以为每个用户设置多个或单个标志，如图所示，当鼠标悬停在标志上时，工具提示会显示与标志相关的语言

我想将所有的标志与它们各自的工具提示对齐。但是因为我是在LaravelPHP框架中编码的，所以div是自动生成的

下面是我对Laravel和divs的代码

<div class="w3-card-12" style="border-radius:15px; padding-left: 10%; width:200px; padding-top: 20px;
   padding-bottom: 30px;
   background-color: #FFA534;">
   <img align="center" src="{{$user->photo}}" style=" border-radius:50%; ; border-style: solid; border-color: #333; border-width: 5px;" width="150px !important" height="150px !important" />
   <h3 style="color:#000;     padding-right: 15%;
      padding-top: 20px;" align="center">{{$user->firstname}}</br>{{$user->lastname}}</h3>
   @foreach($offerings as $offering)
   @if($offering->user_id === $user->id)
   <div class="tooltip2">
      <img  align="middle" src="{{$offering->flag}}"/>
      <span class="tooltiptext">{{$offering->language}}</span>
   </div>
   @endif
   @endforeach
</div>

---

尝试将div标记添加到您的标志中，然后显示：flex；并论证内容：中心

@MichaelCoker居中，就像名字在橙色方框中居中一样，尝试在旗帜上添加一个div标记，然后显示：flex；并论证内容：中心@Nadim成功了谢谢：

<div class="w3-card-12" style="border-radius:15px; padding-left: 10%; width:200px; padding-top: 20px;
   padding-bottom: 30px;
   background-color: #FFA534;">
   <img align="center" src="/uploads/15.jpg" style=" border-radius:50%; ; border-style: solid; border-color: #333; border-width: 5px;" width="150px !important" height="150px !important">
   <h3 style="color:#000;     padding-right: 15%;
      padding-top: 20px;" align="center">Leslie<br>Lee</h3>
   <div class="tooltip2" style="
      margin: 0 auto;
      ">
      <img align="middle" src="/flags/PK-32.png" style="
         ">
      <span class="tooltiptext">Urdu</span>
   </div>
   <div class="tooltip2">
      <img align="middle" src="/flags/CN-32.png">
      <span class="tooltiptext">Chinese</span>
   </div>
   <br>
</div>

.tooltip2 {
    position: relative;
    display: inline-block;
}


.tooltip2 .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip2 .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip2:hover .tooltiptext {
    visibility: visible;
}