画像を中心にしてdivの下にdivを配置します

Question

私には2つの質問があります。基本的には、画像を元のサイズで表示して画面の中央に配置したいのです（画面の中央ではなく「水平」の中間にあることを意味します）。次に、この下にテキストを含むdivを配置します画像。

.figure{ 
position:absolute; 
margin:0 auto; 
left:0; 
right:0; 
bottom:10px; 
top:30px; 
} 

.figure img{ 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    height:100%; 
    width:100%； 
} 

私は2つの質問がある：

<div class="figure">; 
<img src="...">; 
</div>'; 
<div class="text"> 
text here 
</div> 

これは、CSSです：これは私が使用するコードです。最初の1つは、画像の高さが画面の高さよりも長い場合、垂直スクロールバーがない場合、画像が画面に合わせてサイズ変更されただけです。 2番目の質問は、イメージのサイズを知らなくてもイメージの下にテキストを配置する方法です。私はfigcaptionを試みたが、うまくいかない。

Answer 1

完璧な中心にするには、min-height: 100vh;とmin-width: 100vw;が必要になります。次に、ディスプレイフレックスを使用して中央に配置します。それ以外の場合は、縦にセンタリングしないことがあります。

また、1つのdiv内のテキストブロックをimgで移動します。

デフォルトでは、指定しない限り、imgのサイズは変更されません。

デフォルトでは、divには表示ブロックがあり、行全体を取ります。text-align: center;はテキストを中央に配置します。

.figure { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    min-height: 100vh; 
 
    min-width: 100vw; 
 
} 
 

 
.centered { 
 
    text-align: center; 
 
} 
 

 
html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class="figure"> 
 
    <div> 
 
    <img src="http://placehold.it/950x450"> 
 
    <div class="centered"> 
 
     text here 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

まず、私はこれがあなたの頭にあることを仮定します。

HTML

<img src="https://static.tumblr.com/07f1e3ffdfdd03631d00e7792ea3fa93/mja6mxp/AUUna8jev/tumblr_static_tumblr_static_88o50pnpc3k04gw0ck888o80o_640.jpg"/> 
<div class="text">Isn't that pretty!</div> 

CSS

body { 
    color: #eee; 
background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); 
} 

img { 
margin: 0 auto; 
display: block; 
} 

.text { 
margin: 0 auto; 
display: table; 
} 

それがページよりも大きいですときに、画像のサイズが変更された理由についてのあなたの最初の質問。私はあなたのCSSでは、可能な幅と高さの100％になるようにイメージを設定していることを指摘しておかなければなりません。デフォルトでは、イメージは要素に合わせて伸ばされます。

あなたの2番目の質問に答えるには、imgの位置を含む "figure" divが絶対的なので、他の要素の位置は無視されます。ポジションを「ポジション：相対」のような別のタイプに変更すると、他のエレメントを念頭に置いて自分の位置を決めます。

私はhtmlとcssのスキルに最も自信がありませんが、少なくとも2つのセントは、あなたが前方に押しつけるのを助けることを願っています。