html - Bootstrap Image Placement Issue -


i trying 3 images under main logo divided equally , centred, having issue making images go middle of page other elements.

any in understanding appreciated

  1. code below

  2. website http://www.horizonarb.co.uk

    <!doctype html>

    horizon arboriculture

    <!-- bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet">  <!-- google fonts --> <script src="js/googlefonts.js" type="text/javascript"></script>  <link href='https://fonts.googleapis.com/css?family=open+sans|lobster+two' rel='stylesheet' type='text/css'>   <!-- custom css --> <link href="css/custom.css" rel="stylesheet"></link>  <!-- font awesome --> <link rel="stylesheet" href="css/fontawesome/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">   <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]>   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> 

     <div class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px; margin-top: 10px;">      <div class="container">          <div class="navbar-header">              <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">                 <small>menu</small>             </button>           <a href=""><img src="img/front/horizonarb_tree_transparent.png" class="noresize"></a>          </div> <!-- class="navbar-header" -->          <div class="collapse navbar-collapse">              <ul class="nav nav-pills navbar-right">                  <li class="active"><a href="index.html">home</a></li>                 <!--                 <li class="dropdown">                     <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">services <span class="caret"></span></a>                     <ul class="dropdown-menu">                       <li><a href="services.html">crown thinning</a></li>                       <li><a href="#">crown lifting</a></li>                       <li><a href="#">crown reduction</a></li>                     </ul>                 </li>-->                  <li class=""><a href="services.html">services</a></li>                 <li><a href="contact.html">contact</a></li>              </ul>          </div> <!-- class="collapse navbar-collapse" -->      </div> <!-- class="container" -->    </div> <!--  class="navbar navbar-default" -->     
    <div class="row">      <div class="col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-3 center margintopthirty">          <img src="img/front/horizonarb_transparent.png" width="50%">      </div>  </div>  <div class="row">      <div class="col-md-12 col-sm-12 col-xs-12">          <div class="col-md-4 col-sm-4 col-xs-4 margintopthirty">              <img src="img/front/horizonarb_transparent.png" width="50%" class="img-responsive">             <p>image 1</p>          </div>          <div class="col-md-4 col-sm-4 col-xs-4 margintopthirty">              <img src="img/front/horizonarb_transparent.png" width="50%" class="img-responsive">             <p>image 2</p>         </div>          <div class="col-md-4 col-sm-4 col-xs-4 margintopthirty">              <img src="img/front/horizonarb_transparent.png" width="50%" class="img-responsive">             <p>image 3</p>         </div>         </div>  </div>     <div class="row">          <div class="col-md-12 col-sm-12 center margintopthirty" id="topcontainer">                <div class="col-md-10 col-sm-10 col-sm-offset-1 col-md-offset-1 center">                  <p class="">horizon arboriculture professional cheshire based tree surgery company small, expertly trained , qualified work force dedicated providing high quality service , customer care. construction health , safety scheme approved contractor (chas) provide our services both domestic , commercial clients.

    nptc , lantra qualified staff. £10 million public , employers liability insurance. free, competitive, no obligation quotes.

                </div>          </div>  </div>        <div class="footer">      <div class="col-md-12 col-sm-12 center margintopthirty" id="topcontainer">          <small class ="center">design </small>      </div>  </div>       
    <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="js/bootstrap.min.js"></script>

you can (in css):

set images' margins "auto" (margin: auto)

or:

set images "display: inline-block" , container "text-align:center"

both center images in containers.


Comments

Post a Comment