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>

（查看SNIPPET完整页面）所以我的代码在上面，它看起来都很合适但是这就是事情。我在网页上显示它，它位于页面左侧和右侧的栏之间。我希望将照片放在中心位置，这样无论屏幕大小如何，屏幕都会显示在屏幕中间。我在父div上尝试了中心标签和文本对齐中心。我似乎无法排队，我知道它可能是简单而愚蠢的东西，但如果有人知道如何解决这个问题或任何人需要更多细节请告诉我。

布局（当前）：

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

Answer 1

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

＆＃13;

"C:\Program Files\fio\fio.exe" --name=warmup --readwrite=randrw --rwmixread=70 --bs=64k --ba=64k --filename=E\:\FIO_
datafile.dat --size=32m --ioengine=windowsaio  --runtime=900 --time_based --iodepth=4 --numjobs=32  --eta=always

＆＃13;

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

＆＃13;

Answer 2

添加align =“middle” 这里的语法为<img align="left|right|middle|top|bottom">

Answer 3

您需要将内容置于div中心并应用margin：0 auto;那个div。这样左右边距将使每个相等的大小以div为中心

在网页上如何/在哪里居中项目

3 个答案: