0

私は非常に特定の状況を満たす必要がある初心者の html/CSS プログラマーです。2 つの画像がありますが、どちらも画像の中心で垂直方向に配置する必要があります。一方の画像は左揃えで、もう一方の画像は右揃えにする必要があります。それらは最大幅の div になりますが、それは問題ではないと思います。Web ページは 2 つの画像を合わせた幅よりも小さく縮小されるため、画像を水平方向の中央に配置し、一方の画像をもう一方の画像の上に配置する必要があります。clarfiy に写真を追加しました (写真として追加したのに申し訳ありませんが、担当者はゼロです)。div コンテナーと画像はすべて可変であるため、ピクセルに基づく配置は問題外です。

だから私はこれをたくさん調べましたが、私が見つけたすべての答えは部分的でした。私が探しているすべてを行うことができません。何か案は？

( http://imageshack.us/a/img819/9515/3zt.gif )

( http://imageshack.us/a/img14/853/qp8.gif )

調査:
私の質問が -1 されていたことに気付きました。私の研究を提供しなかったのは間違いだったと思いますか？この問題を修正するために私が試みた方法のいくつかを次に示します 。div 内の要素の垂直方向の配置

div内の画像を縦に揃える方法

高さが不明な浮動要素を垂直方向に中央揃えにする方法は?

長い HTML テーブルを次の行に折り返す

4

2 に答える 2

0

編集＃2


別のバージョンでは、これがライブ ビューの
編集ビューで考えられる最もクリーンなビューだと思います
。ワイド スクリーン ビューには css テーブルと vertical-align:middle を使用し、狭いビューポートにはテーブルを折りたたみます。コードはきれいで、画像の高さに完全に依存しません。

================

編集

@ user2748350が正しく指摘したように、以下の私の最初の提案は、高さが異なる場合、ワイドスクリーンで画像を垂直に整列しませんでした.

以下は、垂直方向の配置を使用した改善であるバリエーションです: 中央とインラインの画像。唯一の要件は、行の高さを最も高い画像よりも大きく設定することです:
ライブ ビュー
編集ビュー

===============================================
オリジナル

これが役立つかどうかを確認してください:
ライブ ビュー
編集 ビュー

HTML

<div class="container">
<img src="http://placehold.it/300x150" class="left">
<img src="http://placehold.it/250x150" class="right">
</div>

CSS 

.container{
margin: 0 auto;
max-width:1000px;
}
img.left{
display:block;
float:left;
}
img.right{
display:block;
float:right;
}

@media (max-width: 570px) {
img.left{
float:none;
margin: 0 auto;
}
img.right{
display:block;
float:none;
margin: 0 auto;
}
}

あなたのページの頭に、あなたも追加したい 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

モバイル デバイスで適切に表示されるようにします。

お役に立てれば！

于 2013-09-05T00:07:23.323 に答える
0

ここに簡単な解決策があります

 img {
        max-height: 100%;
        max-width: 90%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

于 2021-02-16T05:39:51.927 に答える