Question

我有一个带有班级横幅的容器div。在我的CSS中，以下规则不会使横幅居中。

为什么会这样？

.banner {
    width:900px;
    height:300px;
    margin:0 auto;
    background:url('img/banner-bg.jpg') top left no-repeat;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    -moz-border-radius: 20px;
}

这是HTML代码，我看不出有什么问题

       <!DOCTYPE html>
       <html>
      <head>
  <title>Animated Banner CSS</title>
 <link rel="stylesheet" type="text/css" href="banner.css">
     </head>
      <body>

         <div class="banner"> 

       <img class="img-snow01" src="img/snow-back.png" width="900" height="600">
       <img src="img/foreground.png" width="335" height="1000" class="img01">
       <img class="img-snow02" src="img/snow-front.png" width="900" height="600">

            <h3 class="txt-heading01">Everthing is 30% off</h3>
       <!--<h3 class="txt-heading02"> Friday and Saturday</h3>-->
        <p class="txt01">Winter</p>
       <p class="txt02">Sale</p>
      <!---<p class="txt03">Click here</p>
       <p class="txt04"> to learn more</p>
         -->

      </div> <!-- Banner-->


       </body>
      </html>

Answer 1

要margin: 0 auto;触发'居中对齐'，它需要元素设置宽度。因为display: block元素默认情况下总是设置为100％宽度

在父元素上设置text-align:center也很常见（如果子元素属于CSS显示类型：inline ）

 /* optional if child elements are display type of inline */
body { text-align: center; } 

/* set a width */
.page {
   width: 80%; margin: 0 auto; text-align: left;
}

演示：http://jsfiddle.net/bBsLm/1/

html和css margin自动错误

1 个答案: