html - Centre bootstrap divs in the middle of an image -


hi guys have background image 5 small divs in it. wondering best way center 5 divs in middle of image. reason cant find way put in middle without using margin-left: 300px or this. tried use div align in row doesn't work well

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 {     font-size: 32px;     line-height: 52px;     width: 52px;     color: #ffffff; } .work_process-box h4 {     font-weight: 400;     margin: 0;     color: black; } 

i tried add margin-left: 200px in work process class wasent sure if correct way it. great

link

@rontheold, can turn row flexbox giving diplay:flex; property , 'justify-content: center' property center items in flexbox.

i've done inline style attribute on row element code.

here's codeply project code in action.


Comments

Popular posts from this blog

ZeroMQ on Windows, with Qt Creator -

unity3d - Unity SceneManager.LoadScene quits application -

python - Error while using APScheduler: 'NoneType' object has no attribute 'now' -