bugfix> css > 投稿

私のウェブサイトには、中央にキャプションがホバー表示されている画像があります。それぞれに同じCSSが適用された同じHTML。 Chromeを除き、ほとんどのブラウザで正常に機能します。Chromeでは、画像の最初の列のみが適切に機能し、残りは壊れています。

私のウェブサイトへのリンク

FirefoxとEdgeは問題なく動作し、IEでも問題ありません

回答 3 件
  • img-caption の変換プロパティを変更する必要があります   translate3d(-50%, 100%, 0) へ 。

    編集:

    コンテナのホバー問題に関して、それはあなたの column-count によるものです  プロパティ。 .gal3 を変更する  代わりにflexプロパティを使用するクラスは問題を修正します。

    .gal3 {
      display: flex;
      flex-flow: row wrap;
    }
    .gal3 .gal-container {
      width: 33%;
    }
    
    

    画像も中央に配置したい場合は、同じ align-middle を使用できます  既に使用しているクラス。

  • これを試して

    .img-caption {

    position: relative;
    color: white;
    font-size: 15px;
    font-weight: 400;
    vertical-align: middle;
    text-align: center;
    margin: 10px auto;
    top: 2em;
    left: 0;
    transform: translate(-50%, 100%);
    -ms-transform: translate(-50%, 100%) -moz-transform: translate(-50%, 100%);
    -webkit-transform: translate(-50%, 100%);
    display: inline;
    
    

    }

  • You can try this code,
    <div class="img-caption">
     <div>
      <b>W filament</b>
      <p>3.08.1.100.m.o</p>
     </div>
    </div> 
    <style>
    .img-caption {
        position: absolute;
        color: white;
        font-size: 15px;
        font-weight: 400;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        height: 100%;
        width: 100%;
    }
    </style>
    
    

あなたの答え