2

すでに投稿されたこのトピックに関する多くの質問があるため、別の投稿を申し訳ありません. しかし、私の状況 (単一の画像ではなく、高さが定義されていない画像の行を垂直方向に並べる) について言及している他の人は、私が必要とすることを達成する返信を受け取っていません。私が知る限り、Kizu の最初の解決策は次のとおりです。div内で画像を垂直方向に配置する方法が重要ですが、残念ながら機能しません。

だから、私はコンテナdivを持っています。必要に応じて、この div の高さを指定できます。必要に応じて、この div を別の div に配置することもできます。

div 内に、さまざまな高さの画像の行を配置したいと考えています。これらの画像は、コンテナの div だけでなく、相互に垂直方向の中央に配置する必要があります。

この場合、背景画像を使用できません (画像は、簡単に置き換える目的でテキスト ウィジェット内に配置されています)。私が知る限り、コンテナ div で display: table を使用することも、画像で display: table cell を使用することもできません。これは、テーブル セルには高さが定義されている必要があり、画像の高さがさまざまであるためです。

ここに私のコードがあります-必要な全体的なセンタリングとパディングを実現するために、いくつかの余分なdiv（#footer-single-widgetと.footer-single）があるので、これらも含めていますそれらは後続のdivに影響を与えています:

<div id="footer-single-widget">
        <div class="footer-single">

       <div class="textwidget">
       <div class="media">

<img src="#image-1" width="103" height="36" class="alignleft" />
<img src="#image-1" width="103" height="40" class="alignleft" />
<img src="#image-1" width="103" height="26" class="alignleft" />
<img src="#image-1" width="103" height="40" class="alignleft" />

       </div><!-- end of .textwidget -->
       </div><!-- end of .media -->

        </div><!-- end of .footer-single -->
    </div><!-- end of #footer-single-widget -->

そしてCSS：

#footer-single-widget {
  width: 100%;
}

.footer-single {
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

#footer-single-widget .textwidget {
  display: block;
  height: 40px;
  width: 980px;
}

.media {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.media img.alignleft {
  display: inline-block;
  vertical-align: middle;
  max-height: 40px;
  max-width: 200px;
}

イライラするのは、ある時点でまさにこの効果を達成したことです-その後、それは必要ないと判断し（その時点での私の画像はすべて同じ高さでした）、私が書いたコードを削除しました. 今、私は再びそれを必要としており、私がしたことのかすかな記憶がありません! しかし、私はそれが可能であることを知っています...どういうわけか。アドバイスありがとうございます。

4

0 に答える 0