Sam Sam - 4 months ago 7
HTML Question

How/where to center Items on Webpage



<div class="jive-html-text-widget">
<style type="text/css">
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 220px;
height: 255px;
}
.widerimg {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 336px;
height: 255px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
<div class="jive-html-text-widget">
<div class="jive-html-text-widget">
<div class="jive-html-text-widget">
<div>
<div class="img">
<a href="examplelink.com" target="_blank">
<img alt="Suit Case" height="200" src="https://d3n8a8pro7vhmx.cloudfront.net/iamthatgirl/pages/1884/attachments/original/1415823015/traveling-light-1.jpg?1415823015" width="300" />
</a>
<div class="desc"><b>View Past Blogs:</b>
<br/>Take a look at past blogs to learn tips and tricks for report building.</div>
</div>
<div class="img">
<a href="examplelink.com" target="_blank">
<img alt="LightBulbs" height="400" src="http://nlpro.info/wp-content/uploads/2014/11/hanging-edison-light-bulb-hanging-mason-jar-pendant-light-fixture-w-edison-bulb--3623-kb-image.jpg" width="600" />
</a>
<div class="desc"><b>SAP Solution Breifs:</b>
<br/>Read the official solution briefs and whitepapers from SAP.</div>
</div>
<div class="img">
<a href="examplelink.com" target="_blank">
<img alt="Image1" height="100" src="http://lifesajuggle.com/wp-content/uploads/2013/06/kids-riding-bikes-during-a-Florida-sunset.jpg" width="600" />
</a>
<div class="desc"><b>SAP Online Tutorials:</b>
<br/>Choose From a variety of free eLearning classes, provided by SAP.</div>
</div>
</div>
<div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="widerimg">
<a href="examplelink.com" target="_blank">
<img alt="Image2" height="150" src="https://s-media-cache-ak0.pinimg.com/236x/dc/f6/33/dcf63394b8a6886aa06c1d3b2d2ef00d.jpg" width="336" />
</a>
<div class="desc"><b>Request Access:</b>
<br/>Request a new Business Objects account or modify your access by following the instructions in this document.</div>
</div>
<div class="widerimg">
<a href="examplelink.com" target="_blank">
<img alt="Image3" height="150" src="http://www.eapfoundation.com/images/problem-solution.jpg" width="336" />
</a>
<div class="desc"><b>TechWork:</b>
<br/>Request how-to consulting, submit enhancement requests for universes or report an issue related to the environment.
</div>
</div>
</div>
</div>
</div>
</div>
</div>




(VIEW SNIPPET FULL PAGE)
So my code is above, and it all looks proper but here is the thing. I am displaying this on a webpage and it's between to bars on the left and right of the page. I want to center the photo's so that no matter what size screen views the site it will always be in the middle of the screen. I have tried center tags and text align center on the parent div. I can't seem to get it to line up, I know it's probably something simple and stupid but if anyone knows how to fix this or anyone needs more detail please let me know.

Layout (current):

xxxxxxxx|photos need to be centered excess space |xxxxxxxxxxxx

Answer

you may use flex straight on html tag :

/*
html {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  }
*/
/* include & fix IE behavior */
html {
  height:100%;
  display:flex;
  align-items:center;
  flex-flow:column;
  }
body {
  margin:auto;
}
/* end fix for IE */

div.img {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 220px;
  height: 255px;
}
.widerimg {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 336px;
  height: 255px;
}
div.img:hover {
  border: 1px solid #777;
}
div.img img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
<div class="jive-html-text-widget">
  <div class="jive-html-text-widget">
    <div class="jive-html-text-widget">
      <div class="jive-html-text-widget">
        <div>
          <div class="img">
            <a href="examplelink.com" target="_blank">
              <img alt="Suit Case" height="200" src="https://d3n8a8pro7vhmx.cloudfront.net/iamthatgirl/pages/1884/attachments/original/1415823015/traveling-light-1.jpg?1415823015" width="300" />
            </a>
            <div class="desc"><b>View Past Blogs:</b>
              <br/>Take a look at past blogs to learn tips and tricks for report building.</div>
          </div>
          <div class="img">
            <a href="examplelink.com" target="_blank">
              <img alt="LightBulbs" height="400" src="http://nlpro.info/wp-content/uploads/2014/11/hanging-edison-light-bulb-hanging-mason-jar-pendant-light-fixture-w-edison-bulb--3623-kb-image.jpg" width="600" />
            </a>
            <div class="desc"><b>SAP Solution Breifs:</b>
              <br/>Read the official solution briefs and whitepapers from SAP.</div>
          </div>
          <div class="img">
            <a href="examplelink.com" target="_blank">
              <img alt="Image1" height="100" src="http://lifesajuggle.com/wp-content/uploads/2013/06/kids-riding-bikes-during-a-Florida-sunset.jpg" width="600" />
            </a>
            <div class="desc"><b>SAP Online Tutorials:</b>
              <br/>Choose From a variety of free eLearning classes, provided by SAP.</div>
          </div>
        </div>
        <div>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <div class="widerimg">
            <a href="examplelink.com" target="_blank">
              <img alt="Image2" height="150" src="https://s-media-cache-ak0.pinimg.com/236x/dc/f6/33/dcf63394b8a6886aa06c1d3b2d2ef00d.jpg" width="336" />
            </a>
            <div class="desc"><b>Request Access:</b>
              <br/>Request a new Business Objects account or modify your access by following the instructions in this document.</div>
          </div>
          <div class="widerimg">
            <a href="examplelink.com" target="_blank">
              <img alt="Image3" height="150" src="http://www.eapfoundation.com/images/problem-solution.jpg" width="336" />
            </a>
            <div class="desc"><b>TechWork:</b>
              <br/>Request how-to consulting, submit enhancement requests for universes or report an issue related to the environment.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>