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

Question

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

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

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

下面是我的 Laravel 和 div 代码

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

从 laravel foreach 循环生成的 html 代码

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

工具提示和div的CSS代码

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

Answer 1

尝试将 div 标记添加到您的标志，然后是 display:flex; 和 justify-content:center;