Question

我查看了类似问题的答案，并试图使用所提出的建议，但是，img仍然保持对齐。

下面是HTML

        <section>
            <img class="seattle" src="img/Seattle Pier.jpg" alt="Seattle docks">
  <h3>General Information</h3>

这是CSS

section {
  margin: 10px 0 10px 0;
}

.seattle {
  display: block;
  margin: 0, auto, 15px;
  border-radius: 50%;
  width: 250px;
  height: 250px;
}

Answer 1

将margin: 0, auto, 15px;更改为margin: 0 auto 15px;，呼叫shorthand

.seattle {
  display: block;
  margin: 0 auto 15px;
  border-radius: 50%;
  width: 250px;
  height: 250px;
}

<强>语法

margin: style                  /* One-value syntax   */  E.g. margin: 1em; 
margin: vertical horizontal    /* Two-value syntax   */  E.g. margin: 5% auto; 
margin: top horizontal bottom  /* Three-value syntax */  E.g. margin: 1em auto 2em; 
margin: top right bottom left  /* Four-value syntax  */  E.g. margin: 2px 1em 0 auto; 

margin: inherit

Answer 2

这很简单。您可以在以下部分添加选择器img：

section img{
   margin:0 auto;
   /*this follows can be set again*/
   margin: 10px 0 10px 0;
}

图像不会居中

2 个答案: