Question

奇怪的是，我没有改变任何东西，但是当我刷新页面时，元素被移到了左边。我的代码是：

<section class='gallery-set'>
  <div>
    <img class='tilesetsmall' src ='images/sample.jpg'>
  </div>
</section>

我的gallery-set课程的css就是：

.gallery-set {
    background-color:#447684;
    border-radius:5px;
    border: 2px solid black;
    width:500px;
    height:700px;
    margin:auto;
    display:inline-block;
}

老实说，我不知道为什么它会向左移动，尽管我将边距设置为自动，特别是因为之前有效。

Answer 1

有些方法：

放置div并使用text-align

CSS：

.align {text-align: center;}
.gallery-set{
background-color:#447684;
border-radius:5px;
border: 2px solid black;
width:500px;
height:700px;
margin:auto;
display:inline-block;
}

HTML：

<div class="align"><section class='gallery-set'><div> <img class='tilesetsmall' src ='images/sample.jpg'></div></section></div>

使用保证金：自动和显示：阻止

CSS：

.gallery-set{
background-color:#447684;
border-radius:5px;
border: 2px solid black;
width:500px;
height:700px;
margin:auto;
display:block;
}

HTML：

<section class='gallery-set'><div> <img class='tilesetsmall' src ='images/sample.jpg'></div></section>

Answer 2

删除display:inline-block;，它会起作用。 Here's a fiddle

您可能打算使用display:block代替，这是有道理的。如果您想要inline-block居中，那么使用<section>是没有意义的。有关各种display值的工作原理的详细演示，请参见this page。

我似乎无法居中<section> </section>

2 个答案: