CODEWITHSUNDEEP
htmlcsshoververtical-alignment
Adam Bell
Adam Bell

Reputation: 1045

Vertically center a span in a div on hover

Having issues with a hover effect in a responsive Shopify site. Really has nothing to do with Shopify but rather CSS. My issue is that when I hover over the two images on the bottom of this page (http://aworldcurated.com/) the text appears center (good) on top (bad). It should be in the middle. I tried adding a vertical-align: middle; to the spans, but no luck yet. Anyone know where I should add it or do I have to rethink this for responsive?

Here's the HTML:

<div class="product span4">
    <div class="image">
      <div class="sample-product-wrapper">
        <a href="http://aworldcurated.com/pages/about-us" title="About a World Curated"><img src="https://cdn.shopify.com/s/files/1/0471/0045/t/1/assets/just-arrived%20Copy.jpg?9523409680747224875" title="About a World Curated" width="302" height="302"><span class="text-content"><span>About Us</span></span></a>
      </div>
    </div>
 </div>

And the CSS:

span.text-content {
  background: none;
  color: black;
  cursor: pointer;
  display: table;
  font-size: 30px;
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  text-transform: uppercase;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Upvotes: 1

Views: 2011

Answers (3)

LcSalazar
LcSalazar

Reputation: 16841

Your image has a fixed height of 302. An easy solution then is to match the line-height property of the <span> to the image's height:

{
    /*...*/
    line-height: 302px;
}

Upvotes: 1

Grzegorz Palian
Grzegorz Palian

Reputation: 349

Here is a nice solution: absolute horizontal vertical centering

span.text-content{
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

Upvotes: 0

degenerate
degenerate

Reputation: 1417

If you inspect the span in your browser, you will see that it doesn't take up any space in the container. You can either change it to a div and give it a height so your vertical-align property works, or push it down within the container with css:

.sample-product-wrapper .text-content {margin-top:45%;}

Use whatever percentage feels right.

Upvotes: 2

Related Questions