无法对齐div内容

Question

我正在使用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> 

我在做什么错？ 如何确保文件夹图标与顶部对齐，文本是否浮动于中心？

Answer 1

可以使用Bootstrap中已经可用的media object来生成此布局，而不是使用.row和.col-* 。

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

Answer 2

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

• 只需在您的情况下将显示柔韧性提供给父级（col-9）。
• 提供对齐项以居中。
• 最后将弹性对齐到行。

这将使您实现上述设计

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