Выравнивание списка HTML

Question

Выравнивание списка HTML

0

У меня есть список HTML, который использует фоновые изображения в противопоставлении тексту как ссылки. Мой контейнер высотой 200 пикселей, и я хочу, чтобы ссылки лежали внутри линии в центре контейнера, если бы это был текст, я мог бы использовать высоту линии: 200 пикселей; для достижения этого, однако, кажется, немного отличается при использовании фоновых изображений, любой орган знает, как достичь этого метода.

Вот jsfiddle, чтобы объяснить, что я имею в виду http://jsfiddle.net/M4XN4/1/

Спасибо, парни

<div id="container">
    <ul class="container">
        <li class="linkedin"><a href="#"></a><li>
        <li class="twitter"><a href="#"></a><li>
        <li class="facebook"><a href="#"></a><li>
    </ul>
</div>

user3380148 16 апр. 2014, в 22:55

Источник

0

Будьте осторожны с 2 элементами, имеющими одинаковый идентификатор. Атрибуты id должны быть уникальными в отличие от классов. Кроме того, закрывающие теги <li> не имеют префикса / ie: </ li>
kilrizzy 16 апр. 2014, в 20:38
0

Ах! Я вижу, хотя это не имеет решения. Однако я изменил свой jsfiddle и код :)
user3380148 16 апр. 2014, в 20:40

Теги:

html

css

html-lists

3 ответа

0

Вы можете использовать display:inline и некоторые поля для вертикального выравнивания.

margin-top:80px;

user2183919 16 апр. 2014, в 19:39

0

Я мог бы, однако, я хотел бы избежать использования вертикальных полей, чтобы я мог держать мой нижний колонтитул отзывчивым.
user3380148 16 апр. 2014, в 20:42
0

Вы можете обернуть контейнер этого и контейнер нижнего колонтитула и сделать его относительным. Затем вы можете использовать абсолютное позиционирование, чтобы положить нижний колонтитул на верхнее поле. (Если нижний колонтитул не находится сверху, используйте z-index)
user2183919 16 апр. 2014, в 20:46

0

В CSS, изменив ul на position: relative; и позиционируя его top: 72px сделал это.

Значение вершины вычислялось путем вычитания 14px (высота ul) + 14px (пустое пространство над ul) из 100px (вертикальный центр содержащего div).

Вы можете увидеть обновленный код здесь: http://jsfiddle.net/M4XN4/2/

Akshay Verma 16 апр. 2014, в 18:40

Ещё вопросы

Будьте осторожны с 2 элементами, имеющими одинаковый идентификатор. Атрибуты id должны быть уникальными в отличие от классов. Кроме того, закрывающие теги <li> не имеют префикса / ie: </ li>
Ах! Я вижу, хотя это не имеет решения. Однако я изменил свой jsfiddle и код :)
Я мог бы, однако, я хотел бы избежать использования вертикальных полей, чтобы я мог держать мой нижний колонтитул отзывчивым.
Вы можете обернуть контейнер этого и контейнер нижнего колонтитула и сделать его относительным. Затем вы можете использовать абсолютное позиционирование, чтобы положить нижний колонтитул на верхнее поле. (Если нижний колонтитул не находится сверху, используйте z-index)

kilrizzy · Accepted Answer · 2014-04-16T19-48-00.000Z

Убирали немного, это тот взгляд, который вы искали?

Большая часть вашего кода тега может оставаться отдельно от каждого класса.facebook.linkedin

#footer-right ul li a{
display:inline-block;
height:200px;
background-size:14px 14px;
background-repeat:no-repeat;
background-position:center;
line-height:200px;
}

http://jsfiddle.net/Ush4n/13/

Сладкий! Если у вас есть какие-то конкретные вопросы о том, что я сделал, просто дайте мне знать