Центрирующая таблица с большим количеством строк

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 

Решенный! ... добавленный код + редактируемый фрагмент, не стесняйтесь попробовать :)

Редактировать 1: Есть класс aboutqi, который установлен для отображения: table and margin: auto. На широком экране есть только одна строка, и край работает отлично = он центрирован. Но когда есть 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, чтобы помочь в этом. Похоже, что ваши номера разделив на 2 ряда вокруг 616px, так что вы хотите сделать что-то по следующим направлениям:

@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

Если вы хотите, чтобы держать ящики на 200px вместо 100% (в случае, если у вас есть изображение или что-то), вы можете использовать следующие носители запрос. Это немного менее чисто, но работает, если вы абсолютно должны поддерживать 200px.

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

Answer 2

Из того, что я беру из этого вопроса, вы хотите изменить CSS, когда ширина экрана достигает определенной ширины. Самый простой способ сделать это - с помощью тега @media.

Вот мое решение css для этой проблемы.

<style> 
.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; 
} 
@media only screen and (max-width: 615px){ 
    .aboutqiitem{ 
     width: 100%; 
    } 
    .aboutqiitems{ 
     width: 100%; 
    } 
    .num{ 
     padding: 0; 
    } 
    .num-center-last { 
     left: 0; 
    } 
} 
</style> 

Имейте в виду, что вам также необходимо установить ширину видового экрана с помощью метатега в теге головы.

<meta content="width=device-width" name="viewport"> 

Это также будет работать: @media только экрана и (макс-ширина: 615px) { .aboutqiitems { с плавающей точкой: нет; } .aboutqiitem { float: none; margin: auto; } .num-center-last { позиция: inherit; } }