当 float left 不起作用时，如何使用 CSS 将 3 div 容器并排对齐

Question

我试图将我的 3 个服务 div 并排对齐，但它们都比另一个略低。我认为这可能是正在制作的图像，因此它们没有对齐。我尝试了以下但没有成功：

.col-md-4 {
float:left;
}

请指教我做错了什么以及如何对齐我的div，我的代码如下：

HTML

<section id="services">
<div class="container text-center">
<h1 CLASS="title">WHAT WE OFFER</h1>
<div class="row text-center">
<div class="col-md-4 services">
<img src="images/service1.png" class="service-img">
<h4>TITLE 1</h4>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
<div class="col-md-4 services">
<img src="images/service2.jpg" class="service-img">
<h4>TITLE 2</h4>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
<div class="col-md-4 services">
<img src="images/service3.png" class="service-img">
<h4>TITLE 3</h4>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
<button type="button"class="btn btn-primary"> All Services</button>
</div>
</section>

CSS

#services
{
    padding: 80px 0;
}
.service-img
{
    width: 100px;
    margin-top: 20px;
}
.services
{
    padding: 20px;      /*service images and paragraphs do not want to align*/
    
}
.services h4
{
    padding: 5px;
    margin-top: 25px;
    text-transform: uppercase;
}
.title::before
{
    content: '';
    background: #7b1798;
    height:5px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    transform: translateY(63px);
}
#services .btn-primary
{
    box-shadow: none;
    padding: 8px 25px;
    border: none;
    border-radius: 20px;
    background-image: linear-gradient(to right,#a517ba,#5f1782);

Answer 1

在这种情况下，flexbox 布局可以帮助您，而不是使用默认的流式布局。 CSS技巧有很好的指导here。

将 display: flex 应用到父级 div .row 将在 flexbox 布局中呈现其子级 divs .services。此外，应用 CSS 声明 align-items: center; 应该在一行中水平对齐其子元素 .services。

完整的 CSS 规则可以是：

.row {
  display: flex;
  align-items: center;
}

当 float left 不起作用时，如何使用 CSS 将 3 div 容器并排对齐

How do I align 3 div container next to each other using CSS when float left does not work

html

css

bootstrap-4