Отделите / сетку от столбцов и внутренних строк столбцов, используя flex, и выровняйте изображение в одном столбце в центре

Я перехожу с поплавков на flexbox, у меня есть некоторые проблемы.

У меня есть следующий код:

.card {
  display: flex;
  flex-direction: row;
  border: 1px solid green;
   margin-bottom: 0.8rem;
}

.card .image {
 border-right: 1px solid #E3E3E3;
 padding: 1.2rem;
vertical-align: middle;
}

.card .body {
 padding: 1.2rem;
 display: flex;
 flex-direction: column;
}

.card .logo {
 margin-bottom: 0.8rem;
}

title {  padding:  0 0 0.8rem 0;}
text { padding: 0}
<div class="card">
    <div class="image"><img src="../img/product_image_sample1.png" width="120"></div>
    <div class="body">
        <img src="logo_sample.png" width="120"/>
        <a href=# class="title">KIT</a>
        <span class="text"> tae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum</span>
</div>
</div>

Я хочу .image быть выровненным по центру по вертикали и иметь нижний отступ между logo, title and text;

Мне нужно работать с IE10, IE11 также.

Источник

2 ответа

Решение

Проблема 1: Flexbox не может быть реализован в IE 11 и ниже, поэтому вам придется использовать float как запасной вариант. (Если это возможно, добавьте комментарий ниже или задайте новый вопрос)

По центру проверьте css, который я редактировал. Добавьте flexbox к предмету и используйте align-items:center чтобы сделать его вертикально по центру.

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

.card {
  display: flex;
  flex-direction: row;
  border: 1px solid green;
   margin-bottom: 0.8rem;
}

.card .image {
 border-right: 1px solid #E3E3E3;
 padding: 1.2rem;
  /*Make the item a flexbox item and center the item vertically*/
  display: flex;
  align-items: center;
}

.card .body {
 padding: 1.2rem;
 display: flex;
 flex-direction: column;
}

.card .logo {
 padding: 0 0 0.8rem 0;
}

title {  padding:  0 0 0.8rem 0;}
text { padding: 0}
<div class="card">
    <div class="image"><img src="https://images.unsplash.com/photo-1492257027549-2617847dc868?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=494b1d11506d9e6babb320454e8a5798" width="120"></div>
    <div class="body">
        <img src="https://images.unsplash.com/photo-1492257027549-2617847dc868?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=494b1d11506d9e6babb320454e8a5798" width="120" class="logo" />
        <a href=# class="title">KIT</a>
        <span class="text"> tae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum</span>
</div>
</div>

Источник

Я думаю, что вы должны использовать

.card {
    display: flex;
    flex-direction: row;
    border: 1px solid green;
    margin-bottom: 0.8rem;
    justify-content: center
    align-items: center
   }

Также я нашел эти видео очень полезными

https://www.youtube.com/watch?v=siKKg8Y_tQY

https://www.youtube.com/watch?v=RdlEEfx912M

Источник
Другие вопросы по тегам