Блог

Я пытаюсь добиться вертикального центрирования блока в 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 все в порядке. Я хочу попытаться сохранить его как можно больше с одним элементом — это для навигатора, поэтому я не хочу, чтобы элементы на элементах были только для одной ссылки.

Редактировать

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

Используйте 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>  

Ссылки

• Вертикальное центрирование CSS

• IE7-/Win img, выравнивание по вертикали посередине

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

Это далеко не один элемент, но вы могли бы просто использовать фактическую ячейку таблицы. Это некрасиво, но поддержка 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. Извините.

Это известная ошибка. Способ исправить это, который может быть неприменим в вашей ситуации, — добавить к элементу значение с плавающей точкой и отобразить его как встроенный блок, чтобы заставить 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> 
  

Редактировать

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

Почему бы вам не попробовать дополнение?

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

<a>Hello superlongword</a>
  

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