Вертикальное центрирование блока <a>в IE7 - PullRequest
Новая
       3

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

4 голосов
/ 01 октября 2011

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

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

Ответы [ 4 ]

2 голосов
/ 10 января 2012

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

Ссылки

1 голос
/ 01 октября 2011

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

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

0 голосов
/ 10 января 2012

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

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

<a>Hello superlongword</a>

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

0 голосов
/ 01 октября 2011

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

РЕДАКТИРОВАТЬ

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

...