Question

建立一个我希望可以扩展移动设备的网站。即使我尝试了很多东西，我也无法弄清楚如何使这项工作成功。

这是我的代码：

.vertical-white {
  display: block;
  width: 100%;
  min-height: 400px;
  background-color: white;
}

.content-container {
  overflow: auto;
  width: 66%;
  max-width: 980px;
  min-width: 720px;
  min-height: 400px;
  background-color: rgba(0, 28, 44, 0.5);
  margin: 0 auto;
}

.horizontal-3 {
  display: block;
  float: left;
  width: 28%;
  min-width: 200px;
  margin-top: 5%;
  margin-bottom: 5%;
  height: 400px;
  background-color: rgba(5, 100, 20, 0.3);
  margin-left: 4%;
}

@media screen and (max-width: 720px) {
  .horizontal-3 {
    width: 250px;
    float: none;
    margin-left: 0 auto;
    margin-right: 0 auto;
  }
  .content-container {
    min-width: 300px;
  }
}

然后这是我的CSS：

Client -> server: 8 bytes

当屏幕小于720px时，div horizontal-3不居中。 Float为none，边距设置为零，显示也是块。为什么它不居中？

Answer 1

最重要的是，它不是margin-left: 0 auto和margin-right: 0 auto，而是只有margin: 0 auto或margin-left: auto和margin-right: auto，即一个值为简写参数的单个参数或组合值。（见这里：http://codepen.io/anon/pen/qrbNZZ）

Answer 2

只需制作

[~, ind] = sort(Dmat(:), 'descend');
ind = ind(1:5);
[r, c] = ind2sub(size(Dmat), ind);

当你写.horizontal-3{ margin: auto; }时，它只是意味着你从右边给出边距，这应该是一个单一的值，但你给了两个 vaues margin-right。所以只需给0 auto，一切都会正常。

使用@media对div进行居中

2 个答案: