html - 以更多行为中心的表格

Question

我在设置为显示表格的 div 元素中有三个数字。当数字被分成更多行时，我需要将数字居中，以便在窄设备上获得更好的体验。

请在整页运行代码片段，然后缩小屏幕尺寸(例如 356 像素)。

What I want:
case1: margin|div|div|div|margin
--------------------------------
case2: margin|div|div|margin
       margin|div|   |margin
--------------------------------
case3: margin|div|margin
       margin|div|margin
       margin|div|margin

已解决! ...已添加代码 + 已编辑的片段，请随意尝试 :)

Edit1:有一个 aboutqi 类设置为显示:表格和边距:自动。在宽屏幕上只有一行，边距完美 = 居中。但是当有 2 或 3 行时，边距停止工作并且 aboutqiitems 不居中。

.aboutqi { 
  margin: auto;
  display: table;
}

.aboutqiitems {
  float: left;
}

.aboutqiitem {
  float: left;
  margin-right: 0px;
  margin-bottom: 30px;
  width: 200px;
}

.aboutqiitem-inner {
  width: 100%;
  margin: auto;
}
.num {
  margin: 0px;
  margin-bottom: 20px;
  padding-left: 13px;
  font-size: 48px;
  font-weight: bold;
  color: #014493;
}

.num-center {
  margin: auto;
  display: table;
}

.num-center-last {
  margin: auto;
  display: table;
  position: relative;
  left: -7px;
}

/* My solution */
.aboutqiitems-solved {
  float: left;
}

@media screen and (max-width: 616px) {
 .aboutqiitems-solved {
    max-width: 100%;
    clear: both;
    padding-left: calc((100% - 400px)/2);
  }
}

@media screen and (max-width: 416px) {
 .aboutqiitems-solved {
    max-width: 100%;
    clear: both;
    padding-left: calc((100% - 200px)/2);
  }
}

@media screen and (max-width: 216px) {
 .aboutqiitems-solved {
    max-width: 100%;
    clear: both;
    padding-left: 0px;
  }
}

<div class="aboutqi">
      <p>Hello, need to center numbers when there is more than 1 row.</p>
      <div class="aboutqiitems">
        <div class="aboutqiitem">
          <div class="aboutqiitem-inner">
            <div class="num-center"><p class="num">1</p></div>
          </div>
        </div>
        <div class="aboutqiitem">
          <div class="aboutqiitem-inner">
            <div class="num-center"><p class="num">2</p></div>
          </div>
        </div>
        <div class="aboutqiitem last">
          <div class="aboutqiitem-inner">
            <div class="num-center-last"><p class="num">3</p></div>
          </div>
        </div>
      </div>
    </div>
    </br>
    </br>
    <!-- My Solution -->
    <div class="aboutqi">
      <p>How I solve it. Fell free to change page width :)</p>
      <div class="aboutqiitems-solved">
        <div class="aboutqiitem">
          <div class="aboutqiitem-inner">
            <div class="num-center"><p class="num">1</p></div>
          </div>
        </div>
        <div class="aboutqiitem">
          <div class="aboutqiitem-inner">
            <div class="num-center"><p class="num">2</p></div>
          </div>
        </div>
        <div class="aboutqiitem last">
          <div class="aboutqiitem-inner">
            <div class="num-center-last"><p class="num">3</p></div>
          </div>
        </div>
      </div>
    </div>

示例:http://www.dcit.sk/ ...几乎在页面底部

Answer 1

您应该在 CSS 表中使用媒体查询来帮助解决此问题。看起来您的数字在 616 像素左右分成了 2 行，所以您想按照以下几行做一些事情:

@media screen and (max-width: 616px) {
  .aboutqiitems {
    width: 100%;
  }
  .aboutqiitem {
    display: block;
    clear: both;
    width: 100%;
  }
}

这是一个显示额外代码及其工作原理的 jsfiddle:https://jsfiddle.net/4be1k4jr/

您可以在此处阅读有关媒体查询以及如何使用它们的更多信息: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

如果您希望将框保持在 200 像素而不是 100%(如果您有图片或其他东西)，您可以使用以下媒体查询。它不太干净，但如果您绝对必须保持 200 像素，则可以使用。

@media screen and (max-width: 616px) {
  .aboutqiitems {
    width: 100%;
  }
  .aboutqiitem {
    display: block;
    clear: both;
    width: 200px;
    position: relative;
    left: 50%;
    margin-left: -100px;
  }
}