0

<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

Sam
  • 29
  • 1
  • 7
  • Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) – Heretic Monkey Jul 13 '16 at 18:23

3 Answers3

1

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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Thank you this snippet was exactly what I was looking for in terms of formatting – Sam Jul 13 '16 at 18:41
0

Add align="middle" Here the syntax <img align="left|right|middle|top|bottom">

killertoge
  • 333
  • 1
  • 4
  • 13
0

You need to put the content to be centered in a div and apply margin: 0 auto; to that div. That way the left and right margins will take each equal size to center the div

Steve Morin
  • 156
  • 11