Уменьшить высоту на h1 с отображением: table-cell

Я сосредоточил текст в ячейке таблицы, используя дисплей: table-cell, vertical-align: middle и text-align: center. Тем не менее, есть раздражающий интервал выше и ниже текста. Как я могу удалить его полностью? Я хочу, чтобы нулевой маркер/отступы по всему тексту.Уменьшить высоту на h1 с отображением: table-cell

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/

источник

2013-08-12 Keven

Является ли текст «привет» отображаемым как отдельная строка или вертикальный столбец шириной один символ? Вы набираете «привет» в качестве столбца. –

@MarcAudet Я планирую сделать каждую ссылку. Я сделал это так, чтобы читать. Я хочу, чтобы все было на одном ряду. Просто обновил его, чтобы отразить эти изменения. – Keven

Можно ли обернуть ссылки в элемент обертки? –

использовать дисплей встроенный имущество, подобное такому:

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

источник

2013-08-12 00:38:50 Bit68

Нет. Это нарушает мой другой дисплей: table-cell. – Keven

О, извините, я не заметил линию таблицы, зачем вам это нужно? – Bit68

Мне нужна табличная ячейка, чтобы центрировать текст посередине страницы по горизонтали. – Keven

Уменьшить высоту на h1 с отображением: table-cell

ответ

Смежные вопросы