LaravelとCssを使用して、中央の単一または複数の画像またはdivを整列させます

Question

したがって、フラグとそれぞれのツールチップを整列しようとしています。私は知っていた方法の負荷を試しましたが、私が探している結果を得ることはできません。

以下は、私がやっていることの簡単なスナップショットを見ることができます。表示されているように各ユーザーごとに複数のフラグを持つことができます。フラグにカーソルを合わせると、フラグに関する言語が表示されます。

すべてのフラグの中央をそれぞれのツールチップに合わせたいと思います。しかし、私はlaravel PHPフレームワークでコーディングしているのでdivが自動的に生成されます。以下

Laravelとdivをlaravel foreachループから生成される

<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コード

<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のツールチップのコードと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

その後、自分の旗にのdivタグを追加しようとdisplay:flex;justify-content:center;