Выравнивание текста по вертикали внутри ссылки внутри <li>, который должен расширяться по горизонтали

Question

Выравнивание текста по вертикали внутри ссылки внутри <li>, который должен расширяться по горизонтали

0

Мне нужно создать меню, которое на мобильных устройствах будет расширяться до полной ширины. Что-то похожее на этот каркас.

Мой код:

HTML

<div id="shortcuts">
    <ul>
        <li><a href="#">Categories</a></li>
        <li><a href="#archives">Archives</a></li>
    </ul>
</div>

CSS

#header {
    width: 100%;
    height: 180px;
    background-color: #666;
    color: #fff;
}

#shortcuts { position: absolute; z-index: 20; top: 0; left: 0; right: 0; }

#shortcuts ul {
    display: table;
    width:100%;

    height: 180px; /* for testing only */
}

#shortcuts ul li {
    list-style: none;   
    display: table;
    height: 60px;
    width:100%;
    display: block; 
    vertical-align: middle;

    background-color: red;   /* for testing only */
    border: blue 3px solid;  /* for testing only */
}

#shortcuts ul li a {
    width: 100%;
    height: 60px;       
    text-decoration: none;
    display: table-cell;
    vertical-align: middle;

    border: 2px dashed green; /* for testing only */
}

Это мой результат до сих пор (цвета, используемые только для тестирования)

Если я изменил #shortcuts ul li a для display: block; , Я могу получить желаемую ширину. Но тогда текст не будет центрировать по вертикали.

Не дубликат привязки CSS-позиционирования внутри ли вертикально выровнен, потому что это лишь частичная часть вертикального выравнивания текста. Не отвечает, как сделать ссылку расширяющейся на 100% шириной.

JGallardo 23 сен. 2013, в 20:30

Источник

Теги:

html

css

css3

1 ответ

Ещё вопросы

UID · Accepted Answer · 2013-09-23T16-17-00.000Z

Вам нужно использовать " display: block; " и " line-height:60px; " для "#shortcuts ul li a {"

Обновленный код:

#shortcuts ul li a {
    width: 100%;
    height: 60px;       
    text-decoration: none;
    display: block; 
    line-height:60px;
    vertical-align: middle;

    border: 2px dashed green; /* for testing only */
}

Пожалуйста, обратитесь к скрипке: - http://jsfiddle.net/aasthatuteja/6WEW6/

Фактически, вы можете удалить свойство "height: 60px;" из "#shortcuts ul li a", так как после задания "line-height" это не требуется, оно делает то же самое