通过显示减少 h1 的高度：table-cell答案

【问题标题】：Reduce height on h1 with display: table-cell通过显示减少 h1 的高度：table-cell
【发布时间】：2013-08-12 10:02:50
【问题描述】：

我使用 display: table-cell、vertical-align: middle 和 text-align: center 使表格单元格中的文本居中。但是，现在文本上方和下方有烦人的间距。我怎样才能完全删除它？我希望文本周围的边距/填充为零。

PS- 我试过border collapse: collapse，但似乎无法正常工作。

（另见下面的小提琴......）

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/

【问题讨论】：

文本“hello”是显示为单行还是显示为一个字符宽的垂直列？您将“hello”排版为一列。
@MarcAudet 我计划将每个链接都设为链接。为了便于阅读，我将其排版。我希望这一切都在一行。刚刚更新它以反映这些变化。
可以将链接包装在包装器元素中吗？
当然。我实际上对其进行了调整，以便每个链接都位于单独的 h1 中。但它可以在 span/div 内。不管怎样让它发挥作用。 PS-我刚刚更新了问题以反映调整。

标签： html css cellspacing

【解决方案1】：

像这样使用内联显示属性：

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

【讨论】：

不。这打破了我的另一个显示：table-cell。
哦，对不起，我没有注意到 table-cell 行，你为什么还需要它？
我需要表格单元将文本在页面中间水平居中。
为什么不使用表格的宽度属性并将其设置为100%？
或者为你的表格设置一个固定的宽度并给它一个边距：0 auto;在css中