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

Post a Comment

Popular posts from this blog

ios - MKAnnotationView layer is not of expected type: MKLayer -

-
Image
so code works fine logger riddled message. there way rid of or suppress it? postannotation.swift class postannotation: mkpointannotation { //mark: properties let post: post //mark: initialization init(post: post) { self.post = post super.init() self.coordinate = cllocationcoordinate2d(latitude: post.latitude, longitude: post.longitude) self.title = post.title self.subtitle = post.timestring() } } adding annotation let annotation = postannotation(post: post) self.map.addannotation(annotation) func mapview func mapview(_ mapview: mkmapview, viewfor annotation: mkannotation) -> mkannotationview? { if annotation mkuserlocation { return nil } var annotationview = mapview.dequeuereusableannotationview(withidentifier: "pin") as? mkpinannotationview if annotationview == nil { annotationview = mkpinannotationview(annotation: annotation, reuseidentifier: "pin")
Read more

ZeroMQ on Windows, with Qt Creator -

-
i have installed zmq link given below on windows 7. http://zeromq.org/distro:microsoft-windows 1) have c++ project in qt-creator , i'm using zmq c++ binding (zhelpers.hpp etc). 2) have added .lib installed zmq folder qtcreator 3) while compiling, compiler looks _imp__zmq_verion, in .dll files present in .lib have __imp_zmq_version. 4) causing undefined reference zmq_version. anyone else faced problem , has solution ?
Read more

unity3d - Unity SceneManager.LoadScene quits application -

-
i have 2 different scenes 1 named 'main' , other 'game' both added scenes in load. when use scenemanager.loadscene("game"); works no problem when tried return main scene code if (input.getkeydown (keycode.escape)) { scenemanager.loadscene("main"); } strangely game quits. thanks. sorry interruption. somewhere on other script found code. if (input.getkeydown (keycode.escape)) { application.quit (); } that's bad, know...
Read more