Question

我尝试将div元素与.slider类水平对齐，但应用margin: 0 auto;不起作用。还请问，如何使滑块图像响应？

＆＃13;

/* CSS Document */

.header {
  background-image: URL("images/header_top.png");
  height: 80px;
}
.logo {
  float: left;
  background-image: URL("images/header_logo.png");
  color: white;
  background-repeat: no-repeat;
  height: 84px;
  width: 264px;
}
body {
  margin: 0px 0px 0px 0px;
  background-image: URL("images/bg_blueprint.jpg");
  width: 100%;
}
.container-main {
  width: 100%;
  text-align: center;
}
.slider {
  background-image: URL("images/slider_photo.png");
  background-repeat: no-repeat;
  margin: 0 auto;
  float: none;
  height: 482px;
  max-width: 100%;
}

＆＃13;

<body>
  <div class="container-main">

    <div class="pure-u-1 pure-u-md-1 header">
      <div class="logo"></div>
    </div>

    <div class="slider"></div>

  </div>
</body>

＆＃13;

Answer 1

这里的问题是滑块div占据其容器的最大宽度。为了使div使用margin:0 auto;在容器中对齐中心。它本身的宽度和高度应该比它的容器小。所以要使它成为中心。将max-width:100%类中的.slider更改为像max-width:350px;

一样的宽度

现在，为了使图像响应，只需在background-size:contain;类中添加.slider。

这是可以按你的方式工作的.slider类：

.slider{
 background-image: URL("http://placehold.it/350x150");
 background-repeat: no-repeat;
 background-size:contain;
 margin: 0 auto;
 float: none;
 height: 482px;
 max-width: 350px;
}

div元素

1 个答案: