Reduce height on h1 with display: table-cell

Question

I centered text in a table cell using display: table-cell, vertical-align: middle, and text-align: center. However, there is annoying spacing above and below the text now. How can I remove it completely? I want zero margin/padding all around the text.

PS- I've tried border collapse: collapse and can't seem to get it to work.

(also see fiddle below...)

HTML:

  <body>
    <div>
    <h1><a href=#>H</a></h1>
    <h1><a href=#>E</a></h1>
    <h1><a href=#>L</a></h1>
    <h1><a href=#>L</a></h1>
    <h1><a href=#>O</a></h1>
    </div>
  </body>

CSS:

    body {
        font-family: 'Sigmar One', cursive;
        font-size: 100px;
        color: white;
        text-shadow: 4px 4px 4px #000;

        background-color:blue;

        width: 100%;
        height: 100%;
        margin: 0;
    }


    div {
        position:absolute; 
        height:100%; 
        width:100%;
        display: table;
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
    }

    a:visited, a:active {
        text-decoration: none;
        color: white;
    }

    a:link {
        text-decoration: none;
            color: white;
        text-shadow: 0px 2px 3px rgba(255,255,255,.25);
        -webkit-background-clip: text;
           -moz-background-clip: text;
                background-clip: text;
    }

    a:hover {
        text-shadow: 4px 4px 4px #000;
        color: white;
    }

http://jsfiddle.net/8Huu7/8/

Is the text "hello" to be displayed as a single line or as a vertical column one character wide? You typeset "hello" as a column. — Marc Audet, Aug 12 '13 at 01:46
@MarcAudet I plan on making each one a link. I typset it that way for readability. I want it all to be on one row. Just updated it to reflect those changes. — neuquen, Aug 12 '13 at 01:52
Sure. I actually tweaked it so that each link is inside of a separate h1. But it can be inside of a span/div. Whatever makes it work. PS- I just updated the question to reflect the tweaks. — neuquen, Aug 12 '13 at 02:01

score 0 · Answer 1 · answered Aug 12 '13 at 00:38

0

use the inline display property like so:

h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
        display: inline;
    }

answered Aug 12 '13 at 00:38

Bit68

1,446
10
25

Nope. That breaks my other display: table-cell. – neuquen Aug 12 '13 at 00:40
oh, I'm sorry I didn't notice the table-cell line, why do you need it anyway? – Bit68 Aug 12 '13 at 00:43
I need the table-cell to center the text in the middle of the page horizontally. – neuquen Aug 12 '13 at 00:44
why don't you use the width property for the table and set it to 100%? – Bit68 Aug 12 '13 at 00:46
or set a fixed width to your table and giv it a margin: 0 auto; in the css – Bit68 Aug 12 '13 at 00:47
If you are referring to my div, it is already set to display: table and width: 100%. – neuquen Aug 12 '13 at 00:48

Reduce height on h1 with display: table-cell

1 Answers1