4
夥計們我正面臨一個問題，我正在做的是創建一個帶有疊加效果的圖像網格，它不僅僅是一個具有絕對位置的容器，並且當某人懸停時有一些標題和文本。
網格每行只能有3個圖像。這一切都很好，但我想根據疊加效果的父元素垂直居中標題和段落文本。我知道我可以通過使用flexbox來做到這一點，但我希望瀏覽器兼容性，這就是爲什麼我不使用flexbox。有沒有一種方法可以在不使用flexbox的情況下做到這一點？沒有彈性盒的垂直居中
*,
.row,
.col {
box-sizing: border-box;
}
body {
font: 1em/1.5 'Open Sans', sans-serif;
color: #373737;
background: #eaeaea;
}
h1,
h2,
h3 {
text-transform: uppercase;
}
h2 {
font-size: 1.125em;
color: #4a89ca;
font-weight: 600;
margin: 0;
}
h3 {
font-size: 1.3em;
line-height: 1.25em;
margin-top: .85em;
margin-bottom: .5em;
}
p {
font-size: .875em;
line-height: 1.4;
margin: 0 0 1.5em;
}
.container {
max-width: 1260px;
width: 94.02985075%;
background: #fff;
margin: auto;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.row {
text-align: center;
margin-bottom: 10px;
}
.row:last-child {
margin-bottom: 0;
}
.col {
position: relative;
float: left;
display: block;
}
.col + .col {
margin-left: 1.6%;
}
.col-4 {
width: 32.2666666667%;
line-height: 0;
overflow: hidden;
}
.col-4 img {
max-width: 100%;
display: block;
background-color: #eaeaea;
}
.photo-overlay {
position: absolute;
left: 0;
padding-left: 20px;
padding-right: 20px;
top: 0;
bottom: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, .5);
}
/* =================================
Photo Overlay Transitions
==================================== */
.photo-overlay {
opacity: 0;
transition: opacity .5s;
}
.photo-overlay:hover {
opacity: 1;
}<body>
<div class="container"> <!-- Start The Container-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/UbkKBuO.jpg" alt="img_1.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/oXvUpY5.jpg" alt="img_2.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/rmM0h1h.jpg" alt="img_3.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div><!-- End The Row-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/51LBdNS.jpg" alt="img_4.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/x9EzUS5.jpg" alt="img_5.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/Y0cIa13.jpg" alt="img_6.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div><!-- End The Row-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/x3qHk2k.jpg" alt="img_7.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/1cHC3hQ.jpg" alt="img_8.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/lNNT4Mq.jpg" alt="img_9.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div><!-- End The Row-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/145mdOE.jpg" alt="img_10.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div> <!-- End The Row-->
</div> <!-- End The Container-->
</body>