Question

当屏幕尺寸小于768px时，3个框对齐到左侧。我很难让他们显得居中。

我设法通过将margin-left设置为某个值来居中，但之后它没有响应。

以下是代码：

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
      <div class="row bg_color">
            <div class="col-xs-12 col-sm-4 col-md-4 stats_box">
               <h3>2015/16</h3>
               <hr>
               <ul>
                  <li>The Best FIFA Men's Player 2016</li>
                  <li>FIFA Club World Cup</li>
                  <li>France Football Ballon D'Or 2016</li>
                  <li>UEFA Best Player in Europe</li>
                  <li>UEFA Euro 2016 (Portugal)</li>
                  <li>UEFA Champions League (Real Madrid)</li>
               </ul>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 stats_box">
               <h3>2014/15</h3>
               <hr>
               <ul>
                  <li>Pichichi Award</li>
                  <li>European Golden Boot 2015</li>
                  <li>FIFA Ballon D'Or 2014</li>
                  <li>Globe Soccer Best Player of the Year</li>
                  <li>Globe Soccer Fan's Favourite Player Award</li>
                  <li>IFFHS Trophy for Best Striker  on the planet</li>
               </ul>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 stats_box">
               <h3>2013/14</h3>
               <hr>
               <ul>
                  <li>Club World Cup</li>
                  <li>BBC Overseas Sports  Personality Award</li>
                  <li>World's Top  Goalscorer 2013</li>
                  <li>Pichichi Award</li>
                  <li>Best Player, Best Forward in La Liga</li>
                  <li>UEFA Best Player in Europe</li>
               </ul>
            </div>
         </div>

</body>

CSS：

 .bg_color {
    background: #ECFEAA;
}

.stats_box {
    margin: 20px;
    padding: 20px 40px 40px;
    max-width: 400px;
    text-align: left;
    background: #fff;
    border-bottom: 4px solid #ccc;
    border-radius: 6px;

}

@media only screen and (max-width: 768px) {
  .stats_box {
    width: 100%;
    margin-left: 200px;
  }
}

任何可能的解决方案？为什么保证金：0自动不能在这里工作？

链接到代码：CodePen

Answer 1

margin: 0 auto;不起作用，因为float: left;上有.stats_box。所以你可以通过几种方式解决这个问题。

1）当768px＆lt;，DEMO

时删除float

@media only screen and (max-width: 768px) {
  .stats_box {
    float: none;
    margin: 15px auto;
  }
}

2）不能在col-xs-12下“直接”工作，内部有一个容器，并且具有最大宽度和所有其他样式，请设置margin: 0 auto;那。这将是我建议的解决方案。 DEMO

<div class="col-xs-12 col-sm-4 col-md-4">
    <div class="stats_box">
      <h3>2015/16</h3>
      <hr>
      <ul>
        <li>The Best FIFA Men's Player 2016</li>
        <li>FIFA Club World Cup</li>
        <li>France Football Ballon D'Or 2016</li>
        <li>UEFA Best Player in Europe</li>
        <li>UEFA Euro 2016 (Portugal)</li>
        <li>UEFA Champions League (Real Madrid)</li>
      </ul>
    </div>
  </div>

@media only screen and (max-width: 768px) {
  .stats_box {
    margin: 15px auto;
  }
}

3） 768px＆lt;，DEMO

时使用flexbox

@media only screen and (max-width: 768px) {
      .row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
      }
    }

4）使用内联（我不会建议这个解决方案，所以没有例子）

Answer 2

将以下内容添加到CSS中，使3个框居中。

.row.bg_color {
  display: flex;
  justify-content: center;
}

Answer 3

尝试使用768px，它可以正常工作

@media only screen and (max-width: 768px) {
 .stats_box {
   width: 100%;
   left:50%;
   transform:translateX(-50%);
 }
}

希望这会有所帮助!!

Answer 4

首先改变您的标记，如下所示并更新css部分

您正在使用带有引导类的嵌套类，而引导类正在使用float:left，这就是您的代码无效的原因。

工作小提琴 fiddle

@media only screen and (max-width: 768px) {
  .stats_box {
    width: 100%;
    margin: 20px auto;
  }
}

＆＃13;

.bg_color {
  background: #ECFEAA;
}

.stats_box {
  margin: 20px;
  padding: 20px 40px 40px;
  max-width: 400px;
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;
}

@media only screen and (max-width: 768px) {
  .stats_box {
    width: 100%;
    margin: 20px auto;
  }
}

body {
  margin: 0 auto;
}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="row bg_color ">
    <div class="col-xs-12 col-sm-4 col-md-4">
      <div class="stats_box"> <!-- Place here the class same as rest -->
        <h3>2015/16</h3>
        <hr>
        <ul>
          <li>The Best FIFA Men's Player 2016</li>
          <li>FIFA Club World Cup</li>
          <li>France Football Ballon D'Or 2016</li>
          <li>UEFA Best Player in Europe</li>
          <li>UEFA Euro 2016 (Portugal)</li>
          <li>UEFA Champions League (Real Madrid)</li>
        </ul>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
      <div class="stats_box">
        <h3>2015/16</h3>
        <hr>
        <ul>
          <li>The Best FIFA Men's Player 2016</li>
          <li>FIFA Club World Cup</li>
          <li>France Football Ballon D'Or 2016</li>
          <li>UEFA Best Player in Europe</li>
          <li>UEFA Euro 2016 (Portugal)</li>
          <li>UEFA Champions League (Real Madrid)</li>
        </ul>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
      <div class="stats_box">
        <h3>2015/16</h3>
        <hr>
        <ul>
          <li>The Best FIFA Men's Player 2016</li>
          <li>FIFA Club World Cup</li>
          <li>France Football Ballon D'Or 2016</li>
          <li>UEFA Best Player in Europe</li>
          <li>UEFA Euro 2016 (Portugal)</li>
          <li>UEFA Champions League (Real Madrid)</li>
        </ul>
      </div>
    </div>
  </div>

</body>

＆＃13;

Answer 5

尝试以您的风格添加此CSS代码，

@media only screen and (max-width: 768px) {
.stats_box {
    width: 100%;
}
.center-col{
    float: none;
    margin: 0 auto;
}
}

并在HTML中

<div class="col-xs-12 col-sm-4 col-md-4 stats_box center-col">

请确保您已移除margin:200px中的.stats_box。希望这会有所帮助！

Answer 6

我建议您在 css 中添加媒体查询。

媒体查询由可选媒体类型和零个或多个表达式组成，这些表达式通过使用媒体功能（如宽度，高度和颜色）限制样式表的范围。 CSS3中添加的媒体查询可以根据特定范围的输出设备定制内容，而无需更改内容本身。

语法：

@media (max-width: 600px) {
   .facet_sidebar {
   display: none;
   }
}

您可以在此网站上了解更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

无法使用自动边距

6 个答案: