垂直センター

Question

これは私が持っているHTMLである：これは私が試したものです

：

<div class="image">Image</div> 
<div class="legend"> 
    Legend<br/> 
    width variable height<br/> 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
</div> 
<div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div> 

これは私が望む結果であり、

.image { 
    height:100px; 
    background-color:red; 
} 
.legend { 
    transform:translateY(-50%); 
    background-color:blue; 
    width:300px; 
    margin:0 auto 
} 
.following { 
    background-color:yellow; 
    margin-top:-45px; 
} 

これは私が得た結果です：

問題は次のとおりです。凡例と次のテキストの間にこの余白を入れても構いません。

The whole attempt codepen is here

質問：JSせずに望ましい結果を得るために任意のソリューション？

（レコード用：this is a solution with JS）

Answer 1

あなたは、要素の高さを知っていますか？正確に50％にする必要がありますか？ここで

は、固定は50px-負の上マージンを持つ例です。

.image { 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.legend { 
 
    background-color:blue; 
 
    width:300px; 
 
    margin:-50px auto 0; 
 
} 
 
.following { 
 
    background-color:yellow; 
 
}

<div class="image">Image</div> 
 
<div class="legend"> 
 
    Legend<br/> 
 
    width variable height<br/> 
 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
 
</div> 
 
<div class="following">The following text should follow immediatly the legend, regardless of the height of the legend or the image</div>

（あなたが探しているまさにおそらくではありません）別のオプションが、それは素敵なソリューションです。 ）

.image { 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.legend { 
 
    background-color:blue; 
 
    width:300px; 
 
    margin:0 auto; 
 
    transform: translateY(-50%) translateX(-50%); 
 
    position: absolute; 
 
    left: 50%; 
 
} 
 
.legend:after { 
 
    content: attr(following); 
 
    display: block; 
 
    width: 100vw; 
 
    clear: both; 
 
    position: absolute; 
 
    background-color:yellow; 
 
    height: auto; 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    
 
} 
 
.following { 
 
}

<div class="image">Image</div> 
 
<div class="legend" following="The following text should follow immediatly the legend, regardless of the height of the legend or the image"> 
 
    Legend<br/> 
 
    width variable height<br/> 
 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
 
</div>

Answer 2

あなたは伝説とのdivで次のテキストをラップし、シンプルなポジショニングでこれを行うと、その位置を行うことができます。相対と次の位置として設定することができます：絶対

チェックこのスニペット

.image { 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 
.legend { 
 
    transform: translateY(-50%); 
 
    background-color: blue; 
 
    width: 300px; 
 
    margin: 0 auto; 
 
} 
 
.following { 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
} 
 
.container { 
 
    position: relative; 
 
    left: 0; 
 
}

<div class="image">Image</div> 
 
<div class="container"> 
 
    <div class="legend"> 
 
    Legend 
 
    <br/>width variable height 
 
    <br/>the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
 
    </div> 
 
    <div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div> 
 
</div>

フレキシボックスで別の解決策

.image { 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.item{ 
 
    transform:translateY(-50%); 
 
} 
 
.center { 
 
    background-color:blue; 
 
    width:300px; 
 
    margin:0 auto; 
 

 
} 
 

 
.Aligner { 
 
    display: flex; 
 
    flex-direction:column; 
 
} 
 

 

 
.Aligner-item--top { 
 
    width:100%; 
 
    background:red; 
 
} 
 

 
.following { 
 

 
    width:100%; 
 
    background-color:yellow; 
 
    
 
}

<div class="Aligner"> 
 

 
    <div class=" Aligner-item Aligner-item--top image">Image</div> 
 
    <div class="item"> 
 
    <div class="Aligner-item center">Legend<br/> 
 
    width variable height<br/> 
 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image</div> 
 
    <div class="Aligner-item Aligner-item--bottom following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div> 
 
    </div> 
 
</div>

希望これは