html - 在图像中间居中 Bootstrap div

Question

大家好，我有一张包含 5 个小 div 的背景图片。我想知道将 5 个 div 在图像中间居中的最佳方法是什么。我出于某种原因无法找到一种方法将它放在中间而不使用 margin-left: 300px 或类似的东西。我尝试在行中使用 div 对齐，但效果不佳

HTML:

  <div class="parallax2">
     <div class="info1">
        <span class="border"></span>
        <div class="row">
           <div class="col-xs-6 col-sm-4 col-md-2" >
              <!-- work_process -->
              <div class="work_process">
                 <div class="work_process-box">
                    <i class="fa fa-lightbulb-o"></i>
                    <h4>IDEA</h4>
                 </div>
              </div>
              <!-- work_process -->
           </div>
           <div class="col-xs-6 col-sm-4 col-md-2">
              <!-- work_process -->
              <div class="work_process">
                 <div class="work_process-box">
                    <i class="fa fa-bank"></i>
                    <h4>DESIGN</h4>
                 </div>
              </div>
              <!-- work_process -->
           </div>
           <div class="col-xs-6 col-sm-4 col-md-2">
              <!-- work_process -->
              <div class="work_process">
                 <div class="work_process-box">
                    <i class="fa fa-comments-o"></i>
                    <h4>DEVELOP</h4>
                 </div>
              </div>
              <!-- work_process -->
           </div>
           <div class="col-xs-6 col-sm-4 col-md-2">
              <!-- work_process -->
              <div class="work_process">
                 <div class="work_process-box">
                    <i class="fa fa-desktop"></i>
                    <h4>TEST</h4>
                 </div>
              </div>
              <!-- work_process -->
           </div>
           <div class="col-xs-6 col-sm-4 col-md-2">
              <!-- work_process -->
              <div class="work_process">
                 <div class="work_process-box">
                    <i class="fa fa-rocket"></i>
                    <h4 id="three" >LAUNCH</h4>
                 </div>
              </div>
              <!-- work_process -->
           </div>
        </div>
     </div>
  </div>

CSS:

.parallax2 {
    background-image: url(https://wallpapercave.com/wp/e7KiEL3.jpg);
    min-height: 400px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px 20px;
}

.work_process {
    position: relative;
    text-align: center;
    margin: 0 auto;
}

.work_process .work_process-box {
    outline: 4px solid #FFFFFF;
    border-radius: 50%;
    height: 120px;
    margin: 2em auto 3em;
    padding: 16px 10px;
    width: 120px;
}
.work_process-box i {
    font-size: 32px;
    line-height: 52px;
    width: 52px;
    color: #FFFFFF;
}
.work_process-box h4 {
    font-weight: 400;
    margin: 0;
    color: black;
}

我试图在工作流程类中添加 Margin-left: 200px 但我不确定这是否是正确的方法。任何帮助都会很棒

Link

Answer 1

@RonTheOld，您可以通过为它提供 diplay:flex; 属性和“justify-content:center”属性将元素在 flexbox 中居中，从而将您的行变成一个 flexbox 。

我已经为您的代码将此作为行元素上的内联样式属性完成。

这是一个 codeply project使用代码。