使用Laravel和Css将中心单个或多个图像或div整体对齐

Question

So I am trying to align flags and their respective tooltips. I tried loads of methods I knew but none seem to get results I am looking for.

Below you can see a quick snapshot of what I am doing, I can have multiple or single flags for each user as shown and when hovered over a flag tooltip shows the language with respect to the flag.

I would like to align center all the flags with their respective tooltips. But because I am coding in laravel php framework the divs are generated automatically.

below is my code for Laravel and 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>

html code that is generated from laravel foreach loop

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

css code for the tooltip and 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;
}

Answer 1

Try to add a div Tag to your flags then display:flex; and justify-content:center;