Hover box with (vertically and horizontal) centered text

Question

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 the 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/

Did you try [vertical-align:middle](http://blog.themeforest.net/tutorials/vertical-centering-with-css/)? — Martin Hennings, Aug 12 '11 at 13:43

score 1 · Answer 1 · answered Aug 12 '11 at 13:55

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>

score 1 · Accepted Answer · answered Aug 12 '11 at 14:10

1

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.

answered Aug 12 '11 at 14:10

Marc Uberstein

12,501
3
44
72

Hey, I tried this one but I don't think it works with me because I don't have a fixed size for the outer box (it has to be flexible for the orientations of the images). Any solutions? I wrote it down in a fiddle http://jsfiddle.net/qaENL/ – Julius Koroll Aug 13 '11 at 08:57

score 0 · Answer 3 · answered Aug 12 '11 at 13:51

0

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;

answered Aug 12 '11 at 13:51

Chris Snowden

4,982
1
25
34

Well, that's just centering it horizontally - he wants it to be vertical aswell. – karllindmark Aug 12 '11 at 13:53
I did this with "text-align:center" because its just text there. But I need to get this "flexible height but vertical centered"-problem fixed! – Julius Koroll Aug 12 '11 at 13:54
1

@ninetwozero, Quite right. Updated. – Chris Snowden Aug 12 '11 at 13:55
Bear in mind margin: auto will only work in most browsers if a specific width and height are set. – Colin Aug 12 '11 at 13:56
@Julius Koroll, try the above and you should be something like what you want with these. – Chris Snowden Aug 12 '11 at 13:56

score 0 · Answer 4 · answered Aug 12 '11 at 13:55

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;}

score 0 · Answer 5 · answered Aug 12 '11 at 14:01

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;
}

There is a typo in your css, second declaration should be for `.cell`. — Martin Hennings, Aug 15 '11 at 06:56

Hover box with (vertically and horizontal) centered text

5 Answers5