Задачка: сверстать такого типа общий вид заголовков
Текст по центру, по бокам по две линии. Следует заметить, что фон не однотонный, поэтому то и возникла проблема. У меня были мысли такими: создать три блока внутри одного, центральный блок по середине, крайние блоки заливать картинкой (с этими двумя линиями). Но как-то реализовать это не получилось... Вот что у меня на данный момент есть:
т.е. у меня распологаются по центру три строчно-блочных элемента, естественно, это не работает, т.к. ширина строчно-блочных элементов зависит от их содержимого.
Честно говорю, гуглил, но, поиски не дали результатов. Я более чем уверен, что задавал неверный поисковый вопрос. Ткните меня пальцем, пожалуйста, в нужное место или подскажите, что применять Заранее спасибо!
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Портфолио https://www.behance.net/d4d4186e
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Портфолио https://www.behance.net/d4d4186e
Question
3des
Доброго времени суток, уважаемые форумчане!
Задачка: сверстать такого типа общий вид заголовков
Текст по центру, по бокам по две линии. Следует заметить, что фон не однотонный, поэтому то и возникла проблема. У меня были мысли такими: создать три блока внутри одного, центральный блок по середине, крайние блоки заливать картинкой (с этими двумя линиями). Но как-то реализовать это не получилось... Вот что у меня на данный момент есть:
h1 {display: block;
text-align: center;
font: 22px/22px Georgia;
color: #fff;
}
h1 span {
display: inline-block;
}
h1 span:before, h1 span:after {
content: "";
display: inline-block;
height: 22px;
margin-right: 20px;
background: url('img/lines.png') center repeat-x;
}
h1 span:after {
margin-right: 0;
margin-left: 20px;
}
т.е. у меня распологаются по центру три строчно-блочных элемента, естественно, это не работает, т.к. ширина строчно-блочных элементов зависит от их содержимого.
Честно говорю, гуглил, но, поиски не дали результатов. Я более чем уверен, что задавал неверный поисковый вопрос. Ткните меня пальцем, пожалуйста, в нужное место или подскажите, что применять
Заранее спасибо!
Link to comment
Share on other sites
4 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.