doudang8824 2017-02-25 17:34
浏览 58
已采纳

使用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;
}
  • 写回答

1条回答 默认 最新

  • drnzpd579935 2017-02-25 17:58
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 写uniapp时遇到的问题
  • ¥15 matlab有限元法求解梁带有若干弹簧质量系统的固有频率
  • ¥15 找一个网络防御专家,外包的
  • ¥100 能不能让两张不同的图片md5值一样,(有尝)
  • ¥15 informer代码训练自己的数据集,改参数怎么改
  • ¥15 请看一下,学校实验要求,我需要具体代码
  • ¥50 pc微信3.6.0.18不能登陆 有偿解决问题
  • ¥20 MATLAB绘制两隐函数曲面的交线
  • ¥15 求TYPCE母转母转接头24PIN线路板图
  • ¥100 国外网络搭建,有偿交流