Question

大家好，所以我有一个背景图片，里面有5个小div。我想知道在图像中间放置5个div的最佳方法是什么。我出于某种原因无法找到一种方法将它放在中间而不使用margin-left：300px或类似的东西。我尝试在行中使用div align，但这不起作用

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;属性和＆＃39; justify-content：center＆＃39;提供行，将您的行转换为Flexbox。属性以使flexbox中的项目居中。

我已将此作为代码的行元素的内联样式属性。

这里有一个codeply project代码在运作。

中心引导程序在图像中间划分

1 个答案: