0

我使用 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/

4

1 回答 1

0

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

h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
        display: inline;
    }
于 2013-08-12T00:38:50.290 回答