html - 如何/在何处将元素置于网页中心

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>

(查看片段全页)所以我的代码在上面，看起来一切正常，但事情就是这样。我在网页上显示它，它位于页面左侧和右侧的栏之间。我想将照片居中，这样无论在什么尺寸的屏幕上查看网站，它都将始终位于屏幕中间。我已经尝试在父 div 上居中标记和文本居中对齐。我似乎无法让它对齐，我知道这可能是一些简单而愚蠢的事情，但如果有人知道如何解决这个问题或需要更多详细信息，请告诉我。

布局(当前):

xxxxxxxx|照片需要居中多余空间|xxxxxxxxxxxx

Answer 1

你可以直接在 html 标签上使用 flex :

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