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

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.

snapshot of either single or multiple flags

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;
}
dongre6227
dongre6227 它工作谢谢:)
3 年多之前 回复
douquanjie9326
douquanjie9326 尝试在标志中添加div标签,然后显示:flex;并证明-内容:中心;
3 年多之前 回复
douqingnao9246
douqingnao9246 居中就像名字以橙色框为中心
3 年多之前 回复

1个回答



尝试在标志中添加 div </ strong>标签,然后 display:flex; </ code> 和 justify-content:center; </ code> </ p>
</ div>

展开原文

原文

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐