☰

div 要素内で画像を水平方向に中央に配置するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon html css
div 要素内で画像を水平方向に中央に配置するにはどうすればよいでしょうか? 質問する

コンテナ div 内で画像を中央揃え (水平方向) にするにはどうすればよいですか?

これが HTML と CSS です。サムネイルの他の要素の CSS も含めました。これは降順で実行されるため、最も高い要素がすべてのコンテナーとなり、最も低い要素がすべての内部に含まれます。

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}
<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

さて、PHP なしでマークアップを追加したので、見やすくなるはずです。どちらの解決策も実際には機能しないようです。上部と下部のテキストを中央に配置することはできず、画像はコンテナー div 内で中央に配置する必要があります。コンテナーのオーバーフローは非表示になっているため、通常はフォーカスが置かれる画像の中心を表示したいのです。

ベストアンサー1

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

私の解決策は次のとおりです:http://jsfiddle.net/marvo/3k3CC/2/

おすすめ記事