CODEWITHSUNDEEP
htmlcsscss-position
user3606785
user3606785

Reputation: 19

How do I center a div with position relative, which is also display table-cell in css?

I am trying to horizontally and vertically center an img on the page, when a user hovers over the image I want text to appear from beneath the bottom edge of the image (so the text will hide behind the img until hovered over). 

#ma {
    position: relative;
    width: 306px;
    height: 400px;
    -webkit-transition:height 1s;
    /* For Safari 3.1 to 6.0 */
    transition:height 1s;
    display: table-cell;
    text-align: center;
    vertical-align: bottom;
}
#ma:hover {
    height: 545px;
}
#ma img {
    position: absolute;
    top: 0;
    left: 0;
}

Upvotes: 1

Views: 72

Answers (3)

ralph.m
ralph.m

Reputation: 14365

Here's an option that works nicely: http://codepen.io/pageaffairs/pen/jsCeq

#ma {
position: absolute;
width: 306px;
height: 400px;
-webkit-transition: height 1s;
transition: height 1s;
display: table-cell;
font-family: 'Roboto Condensed', sans-serif;
font-style: italic;
letter-spacing: 2px;
font-size: 120%;
color: rgb(253, 40, 129);
text-align: center;
vertical-align: bottom;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#ma p {
position: absolute;
bottom: 0;
width: 100%;
}

Upvotes: 1

ShibinRagh
ShibinRagh

Reputation: 6656

try this one height:100vh; , means #ma height value same as window height value 

#ma {
    display:block;
    text-align: center;
    width:100%;
    height:100vh;
}
#ma p {
 position: absolute; 
 display:inline-block; 
 width:306px;
}

Upvotes: 0

prateekc
prateekc

Reputation: 1

Add a div around it as follows

<div align='center'>
<div id='ma'></div>
</div>

Hope this is what you are looking for

Upvotes: 0

Related Questions