我正在尝试对齐 div 标签中的元素，我尝试了几种方法但都失败了。
.
基本上这就是我所拥有的:
我尝试使用 flex，但是当我将单个元素对齐到顶部、中间或底部时，所有 3 个都以这种方式对齐。
有没有一种方法可以仅使用 Bootstrap 来完成？如果没有，请帮助我使用 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>
最佳答案
您可以使用类 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>关于html - 在 div bootstrap 中对齐元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51755688/