Вертикально выровнять текст без использования divs

Я пытался понять это довольно давно, и, похоже, он очень близок к работе, но он просто не будет выравниваться по вертикали. Я пробовал большинство решений, возвращаясь к тому же ответу на таблицу. Однако здесь это не сработает, текст выравнивается прямо вверху. Кто-нибудь знает, почему это не работает, а также исправить это?Вертикально выровнять текст без использования divs

jsfiddle:

http://jsfiddle.net/JyvbJ/

HTML:

<a href="#">Open Up</a>

CSS:

a { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 240px; 
    height: 240px; 
    border-radius: 120px; 
    -moz-border-radius: 120px; 
    -webkit-border-radius: 120px; 
    -khtml-border-radius: 120px; 
    font-size: 20px; 
    line-height: 1; 
    text-decoration: none; 
    text-align: center; 
    margin: 0 auto; 
    display: table-cell; 
    vertical-align: middle; 
} 

a:hover { 
    color: #000; 
    text-decoration: none; 
    background-color: rgba(0,0,0,0.8); 
    opacity: 1; 
    display: block; 
}

Как это выглядит (ЛЕВЫЙ: НОРМАЛЬНЫЙ | RIGHT: НАВЕДЕНИЕ):

Pic:

P.S Я не могу иметь какие-дивы, потому что я хочу, чтобы весь круг, чтобы быть интерактивными в качестве связующего звена. Благодаря

источник

2012-06-13 EGHDK

Этот вопрос может быть более ясным, если у вас есть фотография того, что вы хотите, чтобы он выглядел. – twsaef

position: absolute не смешивается с display: table-cell. Удалите это и display: block в правилах :hover, и он работает. Fiddle

источник

2012-06-14 00:33:54 steveax

Ух, думал, что это будет ответ, но мне нужно, чтобы он появился поверх изображения. Вот почему я использую абсолютную позицию, если вы не можете придумать что-то еще, что вывело бы ее из потока. – EGHDK

Оберните всю вещь в div и абсолютно поместите эту обертку. Не думайте, что есть другое решение, кроме технологии «line-height», упомянутой выше по течению от Aaron. – steveax

Линейная высота в этом случае не нужна (установка позиции на ячейку таблицы). И, как вы сказали, удаление дисплея: block; решает проблему, и она работает с несколькими линиями, а текст над серым bg и/или img. – rafaelbiten

Установите line-height вашего элемента равным height, то есть: line-height: 240px;

EDIT: для поддержки нескольких строк, положить span внутри тега привязки, стиль его с display table-cell; height: 100%; vertical-align: middle;, и стиль, содержащий анкерная бирка с display: table;, как показано на рисунке here.

источник

2012-06-13 23:56:18 Aaron

Да, но когда предложение длинное, оно не обертывается. Идеи? – EGHDK

Я отредактировал свой ответ, чтобы включить поддержку нескольких строк. – Aaron

Попробуйте проверить эту статью. Я думаю, это будет полезно, если вы захотите немного изменить свой код. Без этого я думаю, что это будет невозможно, если вы не используете что-то еще, например jQuery. Here's the link to the article Надеюсь, это поможет!

Редактировать: просто чтобы помочь вам немного больше: измените {position: absolute; } на {display: table-cell; } и удалите строку a: hover {display: block}

источник

2012-06-14 01:12:28 rafaelbiten

Да, пара людей придумала этот ответ, но ему нужно абсолютное позиционирование. – EGHDK

Вертикально выровнять текст без использования divs

ответ

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