Wie/wo Objekte zum Zentrum auf der Seite

Question

<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) mein Code So oben ist, und es sieht alles richtiges, aber hier ist das Ding. Ich zeige dies auf einer Webseite an und es ist zwischen den Balken auf der linken und rechten Seite der Seite. Ich möchte die Fotos so zentrieren, dass unabhängig von der Größe des Bildschirms die Seite immer in der Mitte des Bildschirms angezeigt wird. Ich habe versucht, Center-Tags und Text auszurichten zentrieren auf dem Eltern-Div. Ich kann nicht scheinen, dass es sich anstellt, ich weiß, es ist wahrscheinlich etwas einfaches und dummes, aber wenn jemand weiß, wie man das repariert oder jemand mehr Details braucht, lass es mich wissen.

Layout (Strom):

xxxxxxxx | xxxxxxxxxxxx

Answer 1

zum Zentrum Sie flex gerade auf HTML-Tag verwenden:

/* 
 
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>

Answer 2

hinzufügen align = "middle" Hier die Syntax <img align="left|right|middle|top|bottom">

Answer 3

Sie müssen stellen den Inhalt | Fotos überschüssigen Raum zentriert werden müssen zentriert sein in einem div und margin anwenden: 0 auto; zu diesem div. So werden die linken und rechten Rand wird jeweils gleicher Größe nehmen Sie die div