Как правильно сверстать такой не стандартный шаблон как на дизайне?

Question

[Абай Тажигалиев]

Вот код css
.prev_block{
float:left;
}
.next_block{
float:right;
}
#prev_article{
background:url(../images/arrows-left-sprite.png) no-repeat;
width:40px; height:40px;
display:inline-block; margin-left: -30px;
}
#next_article{
background:url(../images/arrows-right-sprite.png) no-repeat;
width:40px; height:40px;
display:inline-block; margin-right: -30px;
}
.prev_article_text{
font-size:13px; margin:0;
}
.next_article_text{
font-size:13px; margin:0;
}
Нужно чтобы текст быль в середине кнопки след и пред

Comments

[Олег]

Ник Абай Тажигалиев с таким вопросом звучит ))))))))))))) Хотя в ...стане может это и оригинальный дизайн считается))

Answer 1

[Максим]

а что не стандартного ?
я вижу просто блок в центре с текстом и всё
не сложно

Answer 2

[Ankhena]

Выложите код на codepen.io или https://jsfiddle.net/ и расскажите, что именно у Вас не получается. Середина по вертикали или по горизонтали?

На данном этапе проще всего попадать в середину с помощью флексбоксов.

display:flex;
align-items: center

Если речь про заведомо однострочные блоки, то им можно установить line-height равным высоте блока.

Comments

[Абай Тажигалиев]

спасибо!

[Абай Тажигалиев]

Середина по вертикали не получается.

[Ankhena]

Абай Тажигалиев: код выложите куда-нибудь

[Максим]

Абай Тажигалиев: codepen.io/Geyan/pen/mAvOyp?editors=110 так ?

[Ankhena]

Максим Жаров: По этой ссылке блоков с навигацией нету

[Юрий Олиярнык]

середину по вертикали можна задать height:100px; line-height: 100px;
и не нужно флекс использывать

[Абай Тажигалиев]

codepen.io/abaypro/pen/ALNpWv

[Ankhena]

Юрий Олиярнык: у меня вроде именно это и написано в последней строчке ответа?

[Абай Тажигалиев]

Ankhena W: Выложил код html и css codepen.io/abaypro/pen/ALNpWv

[Максим]

Ankhena W: поправил - не тестировал

[Абай Тажигалиев]

Максим Жаров: Там же только кнопка, еще название поста должен быть, после кнопки!

[Максим]

Абай Тажигалиев: посмотрите ссылку ещё раз

[Ankhena]

Абай Тажигалиев: codepen.io/anon/pen/qagqaA цвет добавлен для наглядности

[Абай Тажигалиев]

Ankhena W: Теперь нужно только иконки стрелок добавить с помощью background-position правильно и margin использовать?

[Абай Тажигалиев]

Ankhena W: Спасибо большое!

[Ankhena]

Абай Тажигалиев:
да
По хорошему, посмотрите на код Максим Жаров, там все удачно в один элемент положено. background в уголки поставите и все будет прекрасно.
Чем меньше элементов в DOM, тем лучше.

Если только этим уголкам/стрелочкам не нужна отдельная функциональность.
Кстати, стрелочки тоже хорошо бы делать не картинками, благо есть значки < и >.
И псевдоэлемены :before и :after

[Абай Тажигалиев]

Ankhena W: Для кнопки и для название поста должно быть ссылка на запись!

[Максим]

Ankhena W: вот кстати уже с добавленным другими статьями : codepen.io/Geyan/pen/gwqLLK?editors=110 можете их убрать и макет останется один в один(кнопка нравится и лучший ответ за вами)

[Максим]

сорри не вам писал - простите Ankhena W:

[Ankhena]

Абай Тажигалиев: Смотрите: codepen.io/Ankhena/pen/zKZoEK
кнопки с одним тегом.

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