Question

我尝试将照片放在容器中心。我已经将左右边距设置为0，但仍然无法正常工作。

#navbut {
  width: 100%;
  background: red;
  margin: -7px 0 0 0;
  color: white;
}

.container .box {
  display: inline-block;
  width: 10%;
  margin-left: auto;
  margin-right: auto;
}

.box img.Newspaper_pic {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

<section id="navbut">
  <div class="container">
    <div class="box">
      <img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
    </div>
    <div class="box">
      <img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
    </div>
    <div class="box">
      <img src="http://placehold.it/100x100" alt="News-pic" class="Newspaper_pic">
    </div>
  </div>
</section>

我做错了，我无法将图片集中在一行？

Answer 1

看起来你的图片居中，但只在.box div中，你必须将.box div放在.container中。 .container也需要宽度为100％，因此它跨越整个#navbut。

Answer 2

如果你这样做会怎么样：

  body {
  background: #f5f5f5;
}
#navbut{
  background: red;
  color: white;
}
.box img.Newspaper_pic{width:200px;height: 200px;}
.box
{ left: 50%;
  height: 200px;width: 200px;margin-left: 40%;}

我试过它完美无缺。你可以修复你的imgs的高度和宽度我只需要300px，200px就可以了。如果你想垂直居中，那就是这个问题。我为你做了这件事： https://codepen.io/ZinaTaklit/project/editor/ArVkaw

Answer 3

尝试使用 flex 。由于这些对齐属性，flex很容易为这些布局制作。

Reference Link flex

Stack Snippet

body {
  margin: 0;
}

.container, .box {
  display: flex;
  justify-content: center;
}

.Newspaper_pic {
  display: block;
  max-width: 100%;
}

<section id="navbut">
  <div class="container">
    <div class="box">
      <img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
    </div>
    <div class="box">
      <img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
    </div>
    <div class="box">
      <img src="http://lorempixel.com/400/200/sports" alt="News-pic" class="Newspaper_pic">
    </div>
  </div>
</section>

Answer 4

如果您的图像设置为内联块，则必须使用

＆＃13;

text-align:center;

＆＃13;

。如果您的图像设置为阻止，

margin: 0 auto;

会工作的。

Answer 5

在center标签内放置您想要的任何内容，例如：

<center>
  <img src="" alt="">
</center>

以图片为中心HTML

5 个答案: