Centring Wordpress post title within responsive layout

I am trying to create a portfolio page which displays images of my design projects, each image is a link to a page about the project.

The page is a two column responsive layout. The title of the projects appear on top of the images upon hover.

My problem is that in order to get the title of the project to appear over the image I had to absolutely position it. Which means that now I can't center it within the frame. Any ideas how I can do that? I can give it a percentage but it'll change it's position upon resizing...

This is my code:

<div class="img">
  <a title="<?=$title?>" href="<?=$site[0]?>">
   <?php the_post_thumbnail(); ?>
  </a>
 <span class="itemTitle"><?php the_title(); ?></span>
</div>

This is my css:

.img {
    position: relative;
}

.img span { 
    visibility: hidden; 
    pointer-events: none;
}

.img:hover span { 
    visibility: visible; 
    transition: 0.1s;   
    -webkit-transition: 0.1s;
}

.itemTitle {
    position: absolute;
    top: 42%;
    text-transform: uppercase;
    font-size:40px;
    font-family: 'Verlag A', 'Verlag B'; font-weight: 800; font-style: normal;
    text-align: center;
}

This is a link to the page I am working on : http://www.fredericdesign.net/newsite/work/

Solutions

Do this:

.itemTitle {
    font-family: 'Verlag A','Verlag B';
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    position: absolute;
    text-transform: uppercase;
    top: 42%;
    /*new*/
    right: 0;
    left: 0;
    text-align: center;
}
Tags: Html / Css / Wordpress

Similar questions

wordpress two column responsive layout
Is it possible to have a two column layout in wordpress? I've been trying to build it with css using float:left; but I can't seem to get it to work inside the loop :( Has anyone done this before?
Wordpress twenty-twelve child theme responsive layout problems
I'm working with Wordpress. I've developed a child theme for Twenty Twelve at http://ninemusepress.com Most of the pages work well on my iPhone (Twenty Twelve is responsive) -- but I run into problems with pages that depend upon templates I made. What looks to be happening is some container is still sized smaller than the browser width (even though...
How would I split 'desandro masonry' columns by categories on a responsive wordpress layout
I have created a responsive 'pinterest style' layout on a wordpress blog. The tiles are created by the'featured images' functionality on the admin side. So when the user adds a featured image to their blog post, the 'featured image' will display on the home page integrated into a responsive masonry layout. so the effect on the homepage is a gallery...
How to split a wordpress blog page into a 2 column responsive layout?
I'm curious to know how you'd go about creating a 2 column layout for posts on a wordpress loop. 1 | 2 3 | 4 5 | 6 above is an example of how the blog page should look - however the posts aren't all going to be of equal height (which meant I couldn't simply use a css float rule - because the posts don't push up - e.g. 1 | 2 . | 2 3 | 4 I also am no...
How can I target a one specific page on my wordpress website to show a responsive layout?
The website and page in question is weddings.blaskphotography.com.au/photographs I'd like to have this page, when viewed on an iPhone, to target the mobile stylesheet that Woothemes has included in the Canvas theme I am using. I am using a child theme called, woo-child I wish to have the rest of the website display as normal like its a scaled down ...
What is causing the horizontal scrolling in my responsive WordPress layout?
I am developing a website using WordPress and a modified version of the Quark theme. It is going pretty well, but one problem I am running into is that on screens narrower than 790px, a horizontal scroll appears at the bottom of the browser and I can't figure out what is causing it. Here is the URL: http://yousavewithsolar.emorydayclients.com I kno...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.