Вертикальное центрирование блока <a>в IE7

Я пытаюсь получить вертикальное центрирование блока в IE7 (если возможно, IE6), позвольте мне понять одно: я не вертикально центрирую фактический элемент, а текст внутри элемента. Это мои CSS и HTML, которые работают на IE8 и выше, но не ниже.

a {
    display: table-cell;
    width: 100px;
    height: 54px;
    background: black;
    color: white;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

<a href="#">Hello superlongword</a>

Теперь я знаю, что IE6 практически мертв, я все равно хотел бы поддержать его, если это возможно, но если нет, то IE7 в порядке. Я хочу попытаться сохранить его с одним элементом как можно больше - это для навигатора, поэтому я не хочу элементы на элементах только для одной ссылки.

ИЗМЕНИТЬ

Я решил пойти с спрайтами, навигатору будет намного проще - не лучшее решение, но я буду доволен результатом. Если какие-либо опубликованные решения будут работать, я перейду к ним.:)

Ответ 1

Используйте display:inline-block с элементом-заполнителем для вертикальной центровки гиперссылки блока:

    <style type="text/css">
    #blockbox { width: 500px; height: 500px; border: 1px solid black;}
    #container, #placeholder { height: 100%; }
 
    #content, #placeholder { display:inline-block; vertical-align: middle; }
    </style>
    <div id="blockbox">
      <div id="container">
        <a id="content">
        Vertically centered content in a block box of fixed dimensions
        </a>
        <span id="placeholder"></span>
      </div>
    </div>

Ответ 2

Если вы знаете, что это будет только одна строка текста, используйте высоту строки.

Это далеко не единственный элемент, но вы можете просто использовать фактическую ячейку таблицы. Это уродливо, но поддержка IE6 - уродливое дело.

table {
    border: 0;
    border-collapse: collapse;
    height: 54px;
    width: 100px;
}
td {
    vertical-align: middle;
}
a {
    background: black;
    color: white;
    display: block;
    height: 100%;
    text-align: center;
    text-decoration: none;
}

<table><tr><td><a href="#">Hello superlongword</a></td></td></table>

Если вы знаете, что в ссылке будет определенное количество строк, вы можете центрировать один дополнительный элемент и маржу. (например, <a><em>anchor text</em></a>, em { margin-top:12px })

Если вы не знаете высоту элемента, который должен быть центрирован, вам потребуется поведение макета таблицы. Единственный способ получить это в IE6 - это фактическая ячейка таблицы или JavaScript. К сожалению.

Ответ 3

Это известная ошибка. Способ исправить это, который может не примениться в вашей ситуации, заключается в том, чтобы добавить Float к элементу и показать его как встроенный блок, чтобы заставить hasLayout работать в IE. Я также поставлю хаки FF2, чтобы обойти там проблемы.

Фиксированный код:

a { 
    display: inline-block;
    display: -moz-inline-stack; /*FF2 Hack*/
    zoom: 1; /*IE inline-block star hack*/
    *display: inline; /*IE inline-block star hack*/
    float: left; 
    width: 100px;
    _height: 54px; /*FF2 Hack*/
    background: black;
    color: white;
    text-align: center; 
    text-decoration: none; 
    margin: 0px auto;
}

<a href="#">Hello superlongword</a>

ИЗМЕНИТЬ

Я не добавлял float, потому что я думал, что с другими используемыми хаками это не имеет значения.

Ответ 4

Почему вы не пытаетесь заполнить?

a {
    display: inline-block;
    overflow: hidden;
    padding: 20px;
    background: black;
    color: white;
    text-align: center;
    text-decoration: none;
}

<a>Hello superlongword</a>

Это верно для кроссбраузера по крайней мере для IE7 (не может тестироваться на IE6), пример