Невозможно выровнять содержимое div

Я разрабатываю приложение с использованием Vue.js и Bootstrap. Я хочу разработать папку, которая будет выглядеть так:

Но я не могу выровнять содержимое, чтобы убедиться, что оно выглядит как на картинке выше.

На данный момент картина выглядит так:

Невозможно выровнять содержимое div

Вот код:

<div class = "col-xl-3 col-md-6">
  <stats-card>
    <div slot = "header" class = "folderRectangle">
      <div class = "row">
        <div class = "col-3">
          <div class = "clearfix">
            <i class = "material-icons" id = "folder-image">folder</i>
          </div>
        </div>
        <div class = "col-9">
          <div class = "clearfix" style = "position: relative">
            <div>
              <p style = "text-align: left">Folder Name</p>
            </div>
            <div>
              <p style = "text-align:left">20 files</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </stats-card>
</div>

Что я делаю не так? Как сделать так, чтобы значок папки выравнивался по верхнему краю, а текст располагался по центру?

Вы каким-то образом используете и бутстрап, и vue-материал вместе?

— 11.02.2019 04:20

Нет. Я не использую оба вместе, material-icons только для значков "<link href = "fonts.googleapis.com/icon?family=Material+Значки" rel = "stylesheet">"

— 11.02.2019 04:23

html css twitter-bootstrap vue.js bootstrap-4

11.02.2019 04:13

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

Вместо использования .row и .col-* вы можете использовать media object, уже доступный в Bootstrap, для создания этого макета.

/* demo only */

.media {
  border: 1px solid #ddd;
  padding: 1.5rem;
  margin: 1rem;
}

img {
  max-width: 25px; 
}

.media-body {
  font-size: 0.75rem;
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity = "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin = "anonymous">

<div class = "media">
  <img class = "mr-3" src = "https://png.pngtree.com/element_our/png/20181213/folder-vector-icon-png_267455.jpg" alt = "Generic placeholder image">
  <div class = "media-body">
    <h6 class = "mt-0 mb-1">Folder name</h6>
    <div>20 files</div>
  </div>
</div>

11.02.2019 04:28

Лучший способ добиться того, что вы пытаетесь, - использовать свойство CSS Flex.