Вертикальный текст центра в DIV

Я использую программное обеспечение для размещения корзины, что означает, что у меня есть ограничения на то, что я могу сделать с HTML (я не могу редактировать HTML, но могу добавить новые стили CSS и JavaScript).Вертикальный текст центра в DIV

То, что я пытаюсь вертикально выравнивать текст ссылки ниже (помните, что HTML закодирована):

<div id="ct_sc_listing"> 
<div class="ct_sc_listing_cat"> 
<div class="ct_sc_listing_cat_name"><a href="#">Link Text</a></div> 
</div> 
</div>

Это код CSS Я использую:

<style type="text/css"> 

#ct_sc_listing 
    { 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    width: 100%; 
    } 

.ct_sc_listing_cat { 
    position: relative; 
    width: 150px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #336; 
    font-size: 24px; 
    text-decoration: none; 
    background-color: #DFEBEB; 
    text-align: center; 
    float: left; 
    display: inline-block; 
    padding: 5px; 
    height: 150px; 
    margin-top: 5px; 
    margin-right: 5px; 
    margin-bottom: 5px; 
    margin-left: 0px; 
} 

.ct_sc_listing_cat a:link { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #006; 
    font-size: 24px; 
    text-decoration: none; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    text-decoration: none; /* No underlines on the link */ 
    z-index: 10; /* Places the link above everything else in the div */ 

} 

.ct_sc_listing_cat:visited, .ct_sc_listing_cat a:visited { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #006; 
    font-size: 24px; 
    text-decoration: none; 
} 

.ct_sc_listing_cat:hover, .ct_sc_listing_cat:hover a{ 
    background-color: #006; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #DFEBEB; 
    font-size: 24px; 
    text-decoration: none; 
} 
.ct_sc_listing_cat:active, .ct_sc_listing_cat a:active { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #FFF; 
    font-size: 24px; 
} 

</style>

В любом случае, используя CSS или JavaScript, я могу выровнять текст по вертикали?

EDIT: Я хотел бы добавить, что метод высота строки не будет работать, потому что Link Text является динамическим и может охватывать один или 2 линии

я имел представление о том, что это может быть возможным вложить Текст ссылки в DIV с помощью JavaScript, а затем используйте CSS для стилизации и вертикального выравнивания текста. Я понятия не имею, как это сделать, поэтому любые идеи приветствуются!

Я знаю, что это похоже на много CSS-кода, но я установил ссылку так, чтобы DIV был доступен для кликов.

Заранее благодарен!

источник

2014-01-21 user3220812

Можете ли вы сделать http://jsfiddle.net с этими деталями? Было бы намного проще визуализировать и редактировать! – msturdy

Sure - http://jsfiddle.net/6kZE2/ – user3220812

http://jsfiddle.net/6kZE2/1/ – user3220812

Большая статья, которая говорит об одном из лучших способов для вертикального выравнивания текста с помощью CSS:

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

источник

2014-01-21 20:29:16

Мне удалось заставить это работать с использованием метода Андрея [link] http://jsfiddle.net/ 6kZE2/2/[link], но теперь div больше не доступен для клика (только текст). Любые идеи, как это исправить? – user3220812

Правильная ссылка JSFiddle: http://jsfiddle.net/6kZE2/2/ –

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

посмотреть на его имущество CSS display:table и vertical-align:middle. Кроме того, вы повторяете много своих деклараций стиля ... например, объявление семейства шрифтов должно быть записано только в классе .ct_sc_listing_cat.

источник

2014-01-21 20:14:30

Вертикальный текст центра в DIV

ответ

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