Question

我正在尝试对齐div标签中的项目，并且尝试了几种方法，但未能成功。

。

基本上这就是我所拥有的：

我尝试使用flex，但是当我将单个项目对齐到顶部，中间或底部时，所有3个都以这种方式对齐。

有什么办法可以仅使用引导程序吗？如果没有的话，请用CSS帮助我。谢谢！

这是我的代码（样式在单独的文件中，但针对该问题，我将其最小化为html代码）：

<div class="card card-image" style="background-image: url(/uploads/projects/<%=user_data.projects[i]['image']%>); min-height: 200px;">
    <div class="text-white text-center rgba-black-strong py-3 px-4 rounded" style=" min-height: 200px;">
        <div class="--I tried flex and different aligns--">
            <p class="red-text">
                <i class="fa fa-pie-chart"></i>
                <%=user_data.projects[i].category%>
            </p>

            <h6 class="font-weight-bold">
                <%=user_data.projects[i].title%>
            </h6>

            <a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal<%=i%>"><i class="fa fa-clone left"></i> View</a>
        </div>
    </div>
</div>

Answer 1

您可以使用类d-flex，flex-column和justify-content-around来解决此问题：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />

<div class="card card-image">
    <div class="d-flex justify-content-center rgba-black-strong py-3 px-4 rounded" style="min-height: 200px;">
        <div class="d-flex flex-column justify-content-around">
            <p class="red-text">
                <i class="fa fa-pie-chart"></i>
                1st item
            </p>
            <h6 class="font-weight-bold">
                2nd item
            </h6>
            <a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal">
              <i class="fa fa-clone left"></i> View
            </a>
        </div>
    </div>
</div>

在div引导程序中对齐项目

1 个答案: