Question

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

Answer 1

使用内联显示属性，如下所示：

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

使用display：table-cell降低h1的高度

1 个答案: