Is there a way to center this text div while keeping it behind a fading image on the page? I've tried using margin-left: auto; and margin-right: auto; but it doesn't seem to work. Am I missing something?
I'm testing everything in Chrome, just in case that makes a difference.
HTML
<div class="content">
<div class="info">
<p class="title">Could this be something unfamiliar to me?</p>
<p> </p>
<p class="size">90 x 145 cm</p>
<p> </p>
<p class="year">2012</p>
</div>
<img class="work" src="029.jpg"/>
</div>
CSS
.work {
display: block;
margin-left: auto;
margin-right: auto;
}
img.work:hover {
opacity:0.5;
}
.content {
position: relative;
}
.info {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
position: absolute;
z-index: -1;
}
.title {
font-size: 20px;
font-weight: bold;
}
.year {
font-size: 15px;
font-weight: bold;
}
.size {
font-size: 15px;
font-weight: bold;
}