Страницы

Поиск по вопросам

среда, 12 декабря 2018 г.

Как поместить текст на одной линии со стрелочками?

Как поместить текст на одном уровне со стрелочками?
.owl-buttons .owl-prev, .owl-buttons .owl-next { display: inline-block; font-size: 14px; } .owl-buttons .owl-prev:before { content: '\f104'; font-family: 'fontawesome'; margin-right: 22px; font-size: 36px; font-weight: 100; } .owl-buttons .owl-next:before { content: '|'; margin: 0 5px; } .owl-buttons .owl-next:after { content: '\f105'; font-family: 'fontawesome'; margin-right: 22px; font-size: 36px; font-weight: 100; }

ПРЕДЫДУЩИЕ
СЛЕДУЮЩИЕ


Ответ

Я бы это так сделал, чтобы не было смещений и можно было регулировать толщину |. Комментариями пометил где и что регулировать для своей верстки.
#previous, #next { font-size: 16px; line-height: 44px; padding: 0; margin: 0; display: block; position: relative; float: left; /* clear: left; */ } #center { display: block; /* толщина | */ float: left; height: 18px; margin: 13px; width: 3px; background: #000; } #previous:before { content: '\f104'; font-family: 'fontawesome'; font-size: 44px; position: absolute; top:-1px; left: 0; font-weight: 100; padding: 0; margin: 0; } #next:after { content: '\f105'; font-family: 'fontawesome'; font-size: 44px; position: absolute; top:-1px; right: 0; font-weight: 100; padding: 0; margin: 0; } /* расстояние от стрелки до текста*/ #previous { padding-left: 25px; } /* расстояние от стрелки до текста*/ #next { padding-right: 25px; } /* расстояние от | до текста*/ #center { margin-left: 20px; margin-right: 20px; } #wrap { position: relative; margin: 0; padding: 0; float: left; border: 1px solid black; } /* проверка центра */ /* #yellow { background: yellow; display: block; height: 22px; } */

ПРЕДЫДУЩИЕ ПРЕДЫДУЩИЕ

Комментариев нет:

Отправить комментарий