テーブルセル表示でdivに画像を合わせるには

Question

私は次のHTMLとCSSを持っています。あなたが見ることができるように私は70％と30％の2つの部分に分割された私のメインのdivを持っている。また、内部divのdisplayプロパティはtable cellに設定されています。右の内側のdivには、縦と横の両方に100％のdivに収まらない画像スライドがあります。私はまた、画像の上にホバリング時に最上位層のテキストを表示したいと思うでしょう。どのように私は利用可能なスペースに画像を合わせるのですか？画像の上に画像の中央に正確にテキストを表示するにはどうすればよいですか？

HTML：

<div id="investment"> 

    <div id="left "> 

    </div> 
    <div id="right"> 
     <img class="slides" src="..../img01.jpeg"> 
     <img class="slides" src="..../img02.jpeg"> 
     <img class="slides" src="..../img03.jpeg"> 
     <p id="top-layer">text here</p> 
    </div> 

</div> 

CSS：

#left { 
    width: 70%; 
    display: table-cell; 
    vertical-align: middle; 
} 
#right { 
    position: relative; 
    width: 30%; 
    display: table-cell; 
    vertical-align: middle; 
} 
#right #top-layer{  
    position: absolute; 
    top: 0; 
    left: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 1

私はあなたが解決策を次を探していると思います。

あなたをハーフしますか？

あなたはtable-cellを使用していますが、table-cellのプロパティは、親となるまで機能しません。tableプロパティです。

を水平に整列 -

#investment { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
#left { 
 
    width: 70%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.slide { 
 
    display: table; 
 
} 
 

 
#right { 
 
    position: relative; 
 
    width: 30%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
#right img { 
 
    max-width: 100%; 
 
} 
 

 
.imageBlock { 
 
    position: relative; 
 
    display: table-cell; 
 
} 
 

 
.imageBlock p { 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    margin:0; 
 
} 
 

 
.imageBlock:hover p { 
 
    opacity: 1; 
 
} 
 

 
#right #top-layer { 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
#right:hover #top-layer { 
 
    position: absolute; 
 
    opacity: 1; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div id="investment"> 
 
    <div id="left "> 
 
    THIS IS BLANK SPACE AND WIDTH = 70% 
 
    </div> 
 
    <div id="right"> 
 
    <div class="slide"> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/ff00ee/ff00ee"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/ffeerr/ffeerr"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/dddddd/dddddd"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

を垂直に整列 -

#investment { 
 
    display:table; 
 
    width:100%; 
 
} 
 
#left { 
 
    width: 70%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#right { 
 
    position: relative; 
 
    width: 30%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#right img { 
 
    min-width:100%; 
 
} 
 
.imageBlock { 
 
    position:relative; 
 
} 
 
.imageBlock p { 
 
    position:absolute; 
 
    opacity:0; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    margin:0; 
 
} 
 
.imageBlock:hover p { 
 
    opacity:1; 
 
} 
 
#right #top-layer { 
 
    position: absolute; 
 
    opacity:0; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform:translate(-50%,-50%); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
#right:hover #top-layer{  
 
    position: absolute; 
 
    opacity:1; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform:translate(-50%,-50%); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div id="investment"> 
 
    <div id="left "> 
 
     THIS IS BLANK SPACE AND WIDTH = 70% 
 
    </div> 
 
    <div id="right"> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/ff00ee/ff00ee"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/ffeerr/ffeerr"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
     <div class="imageBlock"> 
 
     <img class="slides" src="https://dummyimage.com/300x200/dddddd/dddddd"> 
 
     <p>HOVER TEXT</p> 
 
     </div> 
 
    </div> 
 
</div>