1

I'm trying to use this jsfiddle to have a horizontally and vertically centered div that stays 100% of the browser width and height, in which the text should be aligned center vertically and horizontally, but currently the top line of the text is aligning to the center, rather than having an overall center point being in the center of the 3 lines of text.

Anyone know how to accomplish this?

My HTML:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Regret</title>
        <meta charset="utf-8">
        <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Bowlby+One+SC' rel='stylesheet' type='text/css'>
        <link href='css/regret.css' rel="stylesheet">
    </head>

    <body>
        <div id="container">
            <div class="inner">
                <h1>Regret</h1>
                <p class="choice">Let it out</p>
                <p class="choice">Wallow in it</p>
            </div>
        </div>
    </body>
</html>

My CSS:

body { font-family: 'Gloria Hallelujah', cursive; margin:0; text-align:center; color: #5e7c88; }
h1, h2, h3 { font-family: 'Bowlby One SC', cursive; color: #4b5f6d; }
img { border: 0; }

#container { margin: 0 auto; }
.choice { font-family: 'Bowlby One SC', cursive; }
.inner {  position: absolute; top: 50%; }

3 Answers 3

1

This fiddle should work (if I understood what you want correctly): http://jsfiddle.net/7ZSmX/23/. I basically use the display: table and display: table-cell properties.

3
  • yes, but I don't want to have to specify a height for the table (unless that height is 100% of the browser)
    – mheavers
    Dec 19, 2011 at 19:56
  • @mheavers. I just changed it (see fiddle in answer). Check it out now. It's 100% of the browser. Dec 19, 2011 at 19:57
  • Nice one! Crazy how much work you have to go to just to center align something
    – mheavers
    Dec 19, 2011 at 20:19
0

change inner to this

position:fixed; top: 50%; text-align:center; width:100%;
1
  • see comments to @John Riselvato
    – mheavers
    Dec 19, 2011 at 19:43
0

Here is the fix: http://jsfiddle.net/7ZSmX/13/

.inner {  margin-top: 50%; }

is what you want to instead of relative.

4
  • doesn't seem to work once I give text a font-size: jsfiddle.net/heaversm/7ZSmX/15
    – mheavers
    Dec 19, 2011 at 19:42
  • jsfiddle.net/7ZSmX/19 there is your font issue. keep everything in .inner Dec 19, 2011 at 19:46
  • What doesn't work exactly? Look at this: jsfiddle.net/7ZSmX/24 it works perfect. Dec 19, 2011 at 20:01
  • The example above is making the container much larger than it needs to be. The previous example was aligning the top of the text to the center of the browser rather than the center of the text.
    – mheavers
    Dec 19, 2011 at 20:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.