Как разместить ссылки вертикально css

автор: admin
21.11.2023

Разместить ссылки по вертикали по центру div

Хотел разместить ссылки с равным отступом от верхнего и нижнего края , но что-то пошло не так. Замучался уже искать где собака зарыта. Надеюсь на вашу помощь.

1 2 3 4 5 6 7 8 9 10 11 12

html> body> head> link href="css1/style.css" type="text/css" rel="stylesheet"> /head> div id="header"> a href="tz/main.txt">img src="tileexp.png" class="img1">/a> a href="tz/links.txt" id="a1"> Ссылки /a> a href="tz/contacts.txt" id="a2"> Контакты /a> /div> /body> /html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

#header { color: white; background: blue; height: 100px; font-family: 'Arial'; } .img1 { height: 50px; Width: 250px; margin: 25px 0px; } #a1 { font-size: 25px; margin: 125px; link {color:white}; hover {color:white}; visited {color:white}; active {color:white}; } #a2 { }

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как растянуть основной div до футера и разместить текст ровно центру этого div?
Всем привет, решил попробовать создать простейший резиновый сайт и чтобы футер был привязан внизу.

DIV по центру по вертикали внутри ячейки TD
Всем привет. Имеется следующая структура: <table <tr> <td> <div.

Разместить блок div по центру
Доброго всем времени суток. Ковыряю стандартный код joomla virtuemart. Никак не могу победить-.

Разместить ссылки по центру
Вот я столкнулся с такой проблемой. Обратите внимание на объект "Понравилась ли вам.

333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

 html lang="ru"> head> meta charset="UTF-8"> title>Document/title> /head> body> div class="box"> div class="link-box"> a href="#" class="link-item" target="_blank" title="link1">link1/a> a href="#" class="link-item" target="_blank" title="link2">link2/a> a href="#" class="link-item" target="_blank" title="link3">link3/a> /div> /div> /body> style> * < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; list-style-type: none; outline: none; >body < font: 16px/24px Arial; >.box < height: 100px; >.link-item < padding: 4px; color: #424242; display: block; border-bottom: 1px solid #ccc; >.link-item:hover < color: red; >/style> /html>

Вертикальное выравнивание ссылок меню на css

Пытаюсь разобраться с созданием меню на css. Имеется вроде как стандартное горизонтальное меню, с выпадающим из второго пункта подменю. Вот как оно должно выглядеть: 1. Ссылка должна срабатывать при нажатии на свободную область блока вокруг неё, а не только на саму ссылку. 2. Текст ссылок должен быть выровнен вертикально по центру пункта меню (в том числе двухстрочный текст). Проблема которая у меня возникают при попытке это реализовать: Задаю ссылке блочный тип и высоту, чтобы ссылка срабатывала при нажатии на свободное место вокруг — текст ссылки смещается и отказывается центрироваться по вертикали. Соответственно в итоге получаю либо п.1, либо п.2, одновременно оба пункта не получается реализовать. Изначально пытался использовать flexbox при создании меню, и все вроде бы шло легко, но выпадающее подменю в таком случае выпадало почему-то по центру пункта меню, а не под ним (выравнивалось вместе со всеми пунктами меню). В итоге вообще запутался.

Отслеживать
ColdReader
задан 12 сен 2019 в 14:11
ColdReader ColdReader
13 4 4 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.nav-bar < background: #99f; >.menu < margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; align-items: stretch; >.menu li < border: 1px solid #000; position: relative; >.menu>li < flex: 1; >.menu a < text-align: center; display: flex; text-decoration: none; font-size: 1.25rem; line-height: 1.5rem; color: #FFFFFF; height: 100%; justify-content: center; align-items: center; >.menu li a div < display: inline-block; vertical-align: middle; >.menu .sub-menu < position: absolute; display: none; margin: 0; padding: 0; list-style: none; background-color: #D2908B; z-index: 1; >.menu .sub-menu a < margin-bottom: -1px; color: white; text-decoration: none; padding:3px 5px; >.menu a:hover < background-color: salmon; >.menu>li:hover .sub-menu < display: block; >.search-form < display: inline-block; margin-right: 17px; width: 300px; >.search-form .search-text < background-image: url(images/glass.png); background-repeat: no-repeat; background-position: 13px 5px; text-indent: 56px; width: 100%; height: 35px; font-size: 0.875rem; line-height: 1.0625rem; display: inline-block; border-radius: 5px; box-shadow: none; border: none; >

Отслеживать
ответ дан 12 сен 2019 в 15:51
Инквизитор Инквизитор
5,935 1 1 золотой знак 6 6 серебряных знаков 25 25 бронзовых знаков

html
css
flexbox
выравнивание

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Вертикальное меню для сайта

Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.

* .widget < padding: 20px 30px; background: white; font-family: 'Roboto', sans-serif; >.widget-title < text-transform: uppercase; letter-spacing: 2px; color: #222; font-size: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid #b99d61; >.widget-list < padding: 0; list-style: none; >.widget-list a:before < content: "\2014"; margin-right: 14px; >.widget-list a < text-decoration: none; outline: none; display: block; padding: 6px 0; letter-spacing: 1px; font-weight: 300; color: #444; transition: .3s linear; >.widget-list a:hover

2. Вертикальное меню в стиле «схема метро»

Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.

.metro < list-style: none; padding: 0; margin: 30px 0 0 50px; border-left: 5px solid #DAE4F1; >.metro li .metro ul < margin: 20px 0 20px 15px; padding: 0; border: none; list-style: none; >.metro ul:before, .metro ul:after < content: ""; width: 5px; height: 28px; background: #DAE4F1; position: relative; display: block; left: -9px; >.metro ul:before < transform: rotate(-45deg); margin-top: -15px; >.metro ul:after < transform: rotate(45deg); bottom: -20px; >.metro ul li .metro ul li:first-child < margin-top: -5px; padding-top: 5px; >.metro ul li:last-child < padding-bottom: 9px; margin-bottom: -25px; >.metro a < text-decoration: none; display: block; font-family: 'Noto Sans', sans-serif; color: #4A4B4D; >.metro a:before

3. Вертикальное меню с эффектами при наведении

Иконка и фоновая заливка, проявляющиеся при наведении на элемент списка, помогут разнообразить дизайн элементов вертикального меню.

.category-wrap < padding: 15px; background: white; width: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; >.category-wrap h3 < font-size: 16px; color: rgba(0,0,0,.6); margin: 0 0 10px; padding: 0 5px; position: relative; >.category-wrap h3:after < content: ""; width: 6px; height: 6px; background: #80C8A0; position: absolute; right: 5px; bottom: 2px; box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0, -8px 0 #80C8A0; >.category-wrap ul < list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.3); >.category-wrap li .category-wrap a < text-decoration: none; display: block; font-size: 13px; color: rgba(0,0,0,.6); padding: 5px; position: relative; transition: .3s linear; >.category-wrap a:after < content:"\f18e"; font-family: FontAwesome; position: absolute; right: 5px; color: white; transition: .2s linear; >.category-wrap a:hover

4. Вертикальное меню с иконками

Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить шрифт Awesome. Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.

* .widget < padding: 20px; border: 5px solid #f1f1f1; background: #fff; border-radius: 5px; font-family: 'Roboto', sans-serif; >.widget h3 < margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: #424949; >.widget ul < margin: 0; padding: 0; list-style: none; width: 250px; >.widget li < border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; >.widget li:last-child < border-bottom: none; margin-bottom: 0; padding-bottom: 0; >.widget a < text-decoration: none; color: #616a6b; display: inline-block; >.widget li:before < font-family: FontAwesome; font-size: 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; >.widget li:nth-child(1):before .widget li:nth-child(2):before .widget li:nth-child(3):before .widget li:nth-child(4):before .widget li:nth-child(5):before

5. Вертикальное меню с картинками

Данный пример можно использовать для оформления блоков с новинками, похожими товарами, и т.п. сайте интернет-магазина.

 Распродажа
   
 Продукт 1
  
 ₽ 2000
 
 
   
 Продукт 2
  
 ₽ 2500
 
 
   
 Продукт 3
  
 ₽ 2070

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600'); .col < width: 300px; background: white; padding: 20px; border: 1px solid #eeeeee; font-family: 'Open Sans', sans-serif; >.col * .widget-title < margin: 0 0 30px; line-height: 1; text-transform: uppercase; letter-spacing: 1px; font-size: 20px; color: #242424; overflow: hidden; >.widget-title:after < content: ""; position: relative; display: inline-block; width: 100%; vertical-align: middle; right: -15px; margin-right: -100%; border-top: 2px solid #cca86d; >.price-line .price-line:last-child .price-line:after < content: ""; display: table; clear: both; >.product-image < width: 80px; float: left; >.product-image a < display: block; outline: none; >.product-image img < display: block; width: 100%; >.product-content < float: left; margin-left: 20px; >.product-title < font-size: 18px; margin-bottom: 10px; line-height: 1; >.product-title a < text-decoration: none; color: #242424; >.price-box < color: #666; font-size: 18px; line-height: 1; >.star-rating < margin-bottom: 10px; font-size: 13px; position: relative; font-family: 'FontAwesome'; >.star-rating:before

HTML/CSS: как центрировать по вертикали

HTML/CSS: как центрировать по вертикали главное изображение

При изучении стилизации HTML-страниц и механизмов выравнивания элементов средствами CSS, начинающий разработчик, как правило, сначала знакомится со способами горизонтального выравнивания элементов. В их числе, например, text-align: center; и margin: 0 auto; . С выравниванием по вертикали возникает больше вопросов. В этой статье разберем пять способов выравнивания элементов в HTML и CSS по вертикали.

Профессия «Фронтенд-разработчик»

Изучите востребованные JavaScript и TypeScript
Научитесь создавать пользовательские интерфейсы сайтов и приложений
Освойте самый популярный фреймворк JavaScript — React
Познакомьтесь с языками веб-разработки HTML и CSS

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

1. У правила для горизонтального выравнивания текста text-align: center; , которое уже упоминалось выше, есть собрат, который называется vertical-align . Как и text-align , vertical-align выравнивает элементы со строчным или строчно-блочным типом бокса. Отличие в том, что свойство text-align применяется к родительскому блоку, а vertical-align необходимо применять непосредственно к выравниваемому элементу.

Свойство vertical-align удобно применять, когда необходимо, например, выровнять иконку внутри строки или два рядом стоящих строчно-блочных элемента. Важно понимать, что vertical-align выравнивает элемент относительно содержащей строки, а не относительно ближайших элементов.

Кроме того, свойство vertical-align можно использовать для того, чтобы выравнивать контент в ячейке таблицы.

2. Для тех, кто не знаком с принципами работы интерлиньяжа и свойством line-height , может стать откровением, что текст располагается посередине содержащей его строки. Этим можно пользоваться при выравнивании. Предположим, что у вас есть элементарный footer, в котором нужно расположить по центру копирайт:

  Copyright - ThriveTalk 2017

Допустим, что высота футера равна 80px. Для того, чтобы текст вертикально встал ровно по центру, достаточно написать в CSS следующее:

У этого способа есть недостаток. Его удобно применять, когда вы уверены, что выравниваемый элемент не будет переполняться. В противном случае при переносе строки между текстом появятся большие вертикальные отступы, что почти наверняка станет нежелаемым поведением.

3. Для предотвращения нежелаемного поведения, описанного в примере выше, можно использовать метод выравнивания: padding . Значения padding-top и padding-bottom помогут вам не только центрировать по вертикали, но и застраховаться от переполнения. Рассмотрим пример:

Предположим, вы верстаете кнопку, при нажатии на которую происходит переход на страницу заказа товара. Высота кнопки не должна превышать 50px. Из макета вы выгрузили следующие стили:

Высота контента внутри кнопки равна высоте строки и составляет 20px. Чтобы текст кнопки встал по центру, необходимо распределить по свойствам padding-top и padding-bottom оставшееся пространство следующим образом: (50px — 20px) / 2.

В результате получаем следующее:

Если текст кнопки измениться с «Заказать» на «Заказать товар онлайн» и перестанет помещаться на одной строке, кнопка сохранит нужный вид, а текст внутри неё по-прежнему будет находиться по центру.

Выравнивание при помощи padding универсально и подходит как для фразовых элементов, так и для выравнивания элементов с блочным типом бокса (но только в некоторых случаях).

4. Еще один инструмент — Flexbox. Внутри flex-контейнера любой элемент, будь то блочный, строчный или даже псевдоэлемент, становится flex-элементом, с которым можно производить любые манипуляции. В этой статье мы не будем подробно останавливаться на flex-свойств, почитать о них можно, например, тут.

У Flexbox есть ряд преимуществ перед обыкновенным выравниванием — в первую очередь это создание крупных сеточных структур и макросеток.

5. А что, если элемент абсолютно спозиционирован? Предположим, что вы сверстали модальное окно, которое нужно спозиционировать не относительно другого элемента, а относительно окна браузера. В этом случае можно использовать position: fixed; .

Стоит отметить, что все описываемые далее действия применимы и в случаях, когда нужно выполнить абсолютное позиционирование внутри другого элемента.

Положением спозиционированных элементов управляют свойства top , right , bottom , left . Попробуем следующее:

В данном случае модальное окно расположено не верно: ровно по центру находится левый верхний угол модального окна, а не его физический центр. Для того, чтобы выполнить его абсолютное позиционирование, изменим положение модального окна с помощью отрицательного margin :

У применения свойства margin в этой ситуации существует один недостаток. При изменении свойств width и/или height модального окна вам придется вручную «подкручивать» значения отрицательного margin , чтобы добиться половины размера его ширины и высоты. Этого можно избежать, используя вместо margin свойство transform . А transform: translate(X, Y) позволяет регулировать смещение элемента относительно исходного положение. Например, так:

В отличие от свойства margin , значения которого вычисляются от ширины родительского элемента, transform: translate(X, Y) берет за основу габариты самого элемента — в данном случае, модального окна. А это то, что нам и нужно. В результате, модальное окно будет всегда находиться в центре. Независимо от своих размеров.