BinaryDevelop
  1. ホーム
  2. html

[解決済み] div 内で画像を水平方向にセンタリングする

2022-03-23 15:08:34

質問

これはおそらく愚かな質問ですが、画像を中央に配置する通常の方法が機能しないので、私は質問しようと思いました。どうすれば、コンテナ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 の中央に配置される必要があります。コンテナはoverflow hiddenなので、通常はそこにフォーカスがあるため、画像の中心を表示したいのです。

解決方法は？ 

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

での私の解答です。 http://jsfiddle.net/marvo/3k3CC/2/

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します