Html 无法使用页边距自动将内容居中_Html_Css

Html 无法使用页边距自动将内容居中

html css

Html 无法使用页边距自动将内容居中,html,css,Html,Css,当屏幕尺寸小于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/cs

当屏幕尺寸小于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>

有什么可能的解决办法吗？为什么边际：0自动在这里不工作

链接到代码：

在768px上试试这个，它可以工作

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

希望这会有帮助

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

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

首先，像下面一样更改标记并更新css部分

您将嵌套类与引导类一起使用，引导类使用的是

float:left

，这就是代码不起作用的原因

工作小提琴

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

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

.bg\u颜色{
背景：#ECFEAA；
}
.stats_盒{
利润率：20px；
填充：20px40px；
最大宽度：400px；
文本对齐：左对齐；
背景：#fff；
边框底部：4px实心#ccc；
边界半径：6px；
}
@仅介质屏幕和（最大宽度：768px）{
.stats_盒{
宽度：100%；
保证金：20px自动；
}
}
身体{
保证金：0自动；
}


2015/16


2016年国际足联最佳男子球员
国际足联俱乐部世界杯
2016年法国足球金球奖
欧足联欧洲最佳球员
2016年欧洲足球锦标赛（葡萄牙）
欧洲冠军联赛（皇家马德里）

2015/16


2016年国际足联最佳男子球员
国际足联俱乐部世界杯
2016年法国足球金球奖
欧足联欧洲最佳球员
2016年欧洲足球锦标赛（葡萄牙）
欧洲冠军联赛（皇家马德里）

2015/16


2016年国际足联最佳男子球员
国际足联俱乐部世界杯
2016年法国足球金球奖
欧足联欧洲最佳球员
2016年欧洲足球锦标赛（葡萄牙）
欧洲冠军联赛（皇家马德里）

页边距：0自动不工作，因为您有float:left.stats\u框中选择code>。所以你可以用两种方法来处理
1）Removefloat
当768px尝试以您的样式添加此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">



请确保已删除统计框
中的边距：200px
。希望这会有帮助
 我建议您在css中添加媒体查询
媒体查询由可选媒体类型和零个或多个表达式组成，这些表达式通过使用媒体功能（如宽度、高度和颜色）来限制样式表的范围。CSS3中添加的媒体查询允许根据特定范围的输出设备定制内容的表示，而无需更改内容本身
语法：
@media only screen and (max-width: 768px) {
  .stats_box {
    width: 100%;
    margin: 20px auto;
  }
}

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

您可以在此网站了解更多信息：
这将打破引导网格，并使所有项目水平流动。由于您似乎不时更改原始代码笔，因此它与问题中的代码不匹配，因此我删除了所有注释和答案，因为如果你改变原始值，答案是不可能关联的。前2个很好：），所以加上1。。。第二个版本与内联块相结合，优于flexbox（基于浏览器兼容性）
<div class="col-xs-12 col-sm-4 col-md-4 stats_box center-col">

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