All geek questions in one place

Vertical centering without flexbox

Guys, I ran into a problem. What I am doing is creating an image grid with an overlay effect, which is nothing more than a container with an absolute position and has some inscriptions and text when someone hovered over it.
A grid can only have 3 images per row. Everything works fine, but I want to vertically center the heading and paragraph text according to the parent element of the overlay effect. I know that I can do this using flexbox, but I want browser compatibility, so I do not use flexbox. Is there a way we can do this without using 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>
Run codeHide result
+4
2

, CSS. , , position: absolute.

*,
.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;
}

/* NEW */
.photo-overlay:hover > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
<div class="container">
  <div class="row">
    <div class="col col-4">
      <img src="http://i.imgur.com/UbkKBuO.jpg" alt="img_1.jpg">
      <div class="photo-overlay">
        <div><!-- START NEW CONTAINER -->
          <h3>Some Caption</h3>
          <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
        </div><!-- END NEW CONTAINER -->
      </div>
    </div>
  </div>
</div>
Hide result

:

, vertical-align :

+1

.photo-overlay div div :

position: absolute;
top: 50%;
transform: translateY(-50%);
0

Source: https://habr.com/ru/post/1684399/

More articles:


All Articles