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 に答える