Question

我对html和css相当陌生，我试图使两个图像在屏幕中央并排放置（在缩放屏幕时自动调整自身）。

我只能使两个图像彼此相邻，而不能使它们居中或自动缩放。

<head>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.row::after {
  clear: both;
  display: table;
}
</style>
</head>
<body>

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

</body>
</html>

这两个图像应该在屏幕中央彼此相邻，并在不同大小的浏览器窗口上以及缩放浏览器时缩放自己。我应该能够将图像的大小更改为所需的大小。

Answer 1

添加以下CSS-

body
{
text-align:center;
}

.row
{
display:inline-block;
}

Answer 2

我希望这会对您有所帮助。

<html>


 <head>
      <style>
         * {
         box-sizing: border-box;
         }
         .ul_class {
         width: 100%;
         display:block;
         text-align: center;
         }
         .li_class {
         width: 33.33%;
         display:inline-block;
         margin-right: -4px;
         }
      </style>
   </head>
   <body>
      <ul class="ul_class">
         <li class="li_class"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpVNXBVaIl8ne-AYJfYxls2Js2dcYJohl5e-d3ompbZxrjtzlk" alt="Snow" style="width:100%"></li>
         <li class="li_class"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpVNXBVaIl8ne-AYJfYxls2Js2dcYJohl5e-d3ompbZxrjtzlk" alt="Snow" style="width:100%"></li>
      </ul>
   </body>
</html>

Answer 3

这是使用flexbox的一种方法

JSFiddle demo here

* {
  height: 100%;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.images {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 0;
  padding: 0 200px;
}

@media screen and (max-width: 768px) {
  .images {
    flex-direction: column;
    padding: 0;
  }
}

<div class="images">
  <img src="https://placekitten.com/600/400">
  <img src="https://placekitten.com/600/400">
</div>

Answer 4

在CSS中使用以下代码。

或您可以使用flex。检查下面的链接。 https://www.w3schools.com/cssref/css3_pr_justify-content.asp

.row {宽度：80％； margin：0自动; }

Answer 5

尝试在行元素上使用flex

.row {   
    display: flex;
    justify-content: center;
    align-items: center;
}

如何在css / html中将两个图像彼此居中

5 个答案: