border я им не центрирую, бордер это обводка всех блоков и в каждом блоке справа полоса.
хороший способ, наверное не работает в старых браузерах codepen.io/aliencash/pen/JEZjpG
можно центровать так:
height: 200px;
line-height: 200px;
но это если текст в одну строку, если текст не в одну строку то будет большой отступ между текстами, из за line-height: 200px;
я центрую так:
display:table-cell;
vertical-align:middle;
height:180px;
чем он плох этот метод?
так там есть макет, сожми экран браузера, сжимай и увидишь перестройку.
и там вылезает вторая проблема связанная с height:180px;
добавил media only screen and (max-width: 800px) {
.corzalltblock{
flex-direction: column;
}
}
ага сработало, переносит, данная функция работает только в современных браузерах?
я так понимаю что не как нельзя сделать, пусть тогда height:180px; выходит что идет 6 блоков, картинку можно не трогать пусть будет как есть, при сжатии экрана до определенного момента она все равно как надо делается, а вот блоки где есть пространство, переносятся заранее не сжавшись, хотя я описывал проблему, с флексом, вообще ничего не переносит и фото начинает сжимать.
а если надо будет прижать блок к правому краю тут без float не как, допустим на одной линии два дива, левый и правый.
слушай ага работает
.corzalltblock{
display: flex;
}
а как быть с border он ведь height:180px; все что в боках оно центрируется.
если сжимать окно брайзера, то и фото сжимает и блоки, а бордер нет, как тут быть?
вот вид такой c2n.me/3H9qeHR
некрасиво выглядит что картинка сжалась. ну и перенос перестал работать, а раньше блоки переносились, походу чет еще делать надо.
вы наверное не поняли, там нет отступов, когда сжимаю разрешение браузера, то все сжимается, ну адаптируется, кроме заголовка и цены. оно стоит на месте и выходит что большой пробел.
media only screen and (max-width: 800px) {
.corzalltblock{
flex-direction: column;
}
.corzalltov{
width: 100%;
border-bottom: 1px solid #FBE4E6;
height:none;
}
.corzalltovi {
width: 100%;
}
.corzalltovn {
width: 100%;
border-bottom: 1px solid #FBE4E6;
height:none;
}
.corzalltovr {
width: 100%;
border-bottom: 1px solid #FBE4E6;
height:none;
}
.corzalltovc {
width: 100%;
border-bottom: 1px solid #FBE4E6;
height:none;
}
.corzalltovx {
width: 100%;
height:none;
}
}
только вот оно не срабатывает. как не странно.