Question

我想在我的网站上以左对齐和中对齐的方式显示电影海报。当我减小屏幕尺寸时，右侧的图像会移至最底行，但后面会留一些空间。我想避免显示空间并将图像水平居中放置在页面上。如果有人需要更多信息，请在下面评论。谢谢。

<html>
<body>
<head>
  <title></title>
  <style>
      body {
          margin: 0;
          background-color: #00B9EF;
      }

      #navigation {
          background-color: skyblue;
          width: 100%;
          height: 40px;
      }

      #content {
          width:80%;
          height:1000px;
          margin: 0px auto 0px auto;
          background-color:white;
      }

      img {
          width: 216px;
          height: 312px;
          margin: 0px 10px 10px 10px;
          float: left;
      }
  </style>
</head>
<body>
  <div id="navigation">
  </div>
  <div id="content">
      <img src="http://findingsanityinourcrazylife.com/wp-content/uploads/2016/07/Marvels-Doctor-Strange-Movie-Poster.jpg">
      <img src="http://i.ebayimg.com/00/s/MTI4MFg4NjQ=/z/~Y0AAOSwpDdVL7wr/$_57.JPG">
      <img src="http://2.bp.blogspot.com/-DRfiX4Hvxz8/ToBxyxcPY7I/AAAAAAAABXM/FY5M1Xu1yuQ/s1600/official+poster+marvel+2012+the+avengers+movie+poster+black+widow+Scarlett+thor+hulk+ironman+captain+america+hawk+eye.jpg">
      <img src="https://i.pinimg.com/736x/f0/86/d7/f086d7dc68221aaebf5bb96bd714376e.jpg">
      <img src="http://1.bp.blogspot.com/-rBl_lMafCF8/UTeIqGqZA4I/AAAAAAAAL6E/CqoYjl_joHI/s1600/Iron_Man_3_international.jpg">
      <img src="http://screenrant.com/wp-content/uploads/Ant-Man-Marvel-Movie-Poster-3-Flying-Ant-Mount.jpg">
      <img src="https://i.pinimg.com/originals/f6/0c/ee/f60cee3a3e6acf256a1ba1b580b75473.png">
      <img src="https://i.pinimg.com/736x/17/0b/e2/170be2192d21c8e3aaf17eed5b010826.jpg">
      <img src="https://www.inspirationde.com/wp-content/uploads/2018/01/captain-marvel-15171246438g4nk.jpg">
      <img src="https://i.redd.it/auaj0sls06611.jpg">
  </div>
</body>
</html>

在<div>中将图像海报左对齐并居中

0 个答案: