Hover box with (vertically and horizontal) centered text [duplicate]
I made a on-hover-information-box for an image-mosaic for a client. When the person hovers the image (different orientations, so its flexible sized) he gets another div
above it with some informations. The flexibility is the problem: I want the content of the div
vertically and horizontal centered. At the moment it looks like this:
.linkbox {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
color: #fff;
font-size: 1.9em;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
}
But I want to t开发者_StackOverflow社区he stuff to appear in the middle of the box. So my first thought: padding-top:40%;
and a height of (maybe!?) 50% and the rest for the Information. I know I have to make the size in % too but thats just gross. Do you have any idea?
The project is here: http://www.davidgoltz.de/2011/archive/
You have a look at this : Link http://jsfiddle.net/qfXVa/2/
div.linkbox {
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
color: #fff;
font-size: 10px;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
display: table;
vertical-align: middle;
}
div.linkbox div {
display: table-cell;
vertical-align: middle;
}
I basically set a container for the text content and aligned it Vertically and Horizontally middle to the parent.
This is the best guide I have found to vertically centering/aligning content:
http://phrogz.net/css/vertical-align/index.html
From the guide, you could use the following CSS:
<span style="display:inline-block; vertical-align:middle">Your content</span>
To center text in middle of a div
I found the following works best:
.center
{
margin: auto;
}
You can also use:
text-align: center;
vertical-align: middle;
Have a look at the methods described in this blog post.
I would try vertical-align:middle
or go for this solution:
<div id="top">
<h1>Title</h1>
</div>
<div id="floater"></div>
<div id="content">
Content Here
</div>
#floater {float:left; height:50%; margin-bottom:-120px;}
#top {float:right; width:100%; text-align:center;}</strong>
#content {clear:both; height:240px; position:relative;}
This one works for me --
HTML :
<a style="display: block;" class="fancybox linkbox-709 linkbox" href="http://www.davidgoltz.de/2011/wp-content/uploads/2011/08/black-forest.jpg">
<div id="wrapperC" style="display: table; height: 100%; vertical-align: middle;">
<div id="cell" style="display: table-cell; vertical-align: middle;">
<div class="content">
<span class="datum">Aug 8th</span>
<h1 class="post-title-archive">Black Forest</h1>
</div>
</div>
</div>
CSS:
.wrapperC {
display: table;
height: 100%;
vertical-align: middle;
}
.wrapperC {
display: table-cell;
vertical-align: middle;
}
精彩评论