无法对齐 div 内容答案

【问题标题】：Unable to align div content无法对齐 div 内容
【发布时间】：2019-07-04 12:44:03
【问题描述】：

我正在使用 Vue.js 和 Bootstrap 开发一个应用程序。我正在寻找一个看起来像这样的文件夹：

但是，我无法对齐内容以确保它看起来像上图。

图片目前是这样的：

代码如下：

<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>

我做错了什么？如何确保文件夹图标顶部对齐且文本浮动到中心？

【问题讨论】：

你有没有同时使用 boostrap 和 vue-material ？
没有。我没有同时使用两者，material-icons 仅适用于图标 "fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">"

标签： html css twitter-bootstrap vue.js bootstrap-4

【解决方案1】：

除了使用 .row 和 .col-*，您可以使用 Bootstrap 中已有的 media object 来生成此布局。

/* 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>

【讨论】：

【解决方案2】：

实现您所尝试的最佳方法是使用 CSS Flex 属性。

在您的情况下，只需将 display flex 提供给父级 (col-9)。
提供居中对齐项目。
最后弯曲对齐到行。

这将使您实现上述设计

您可以在此处阅读有关 CSS flexbox 的更多信息 https://www.w3schools.com/css/css3_flexbox.asp

【讨论】：