Centering table with more rows - html

Question

I have three numbers in a div element that is set to display table. I need to center numbers when they are divided in more rows for better experience on narrow devices.
Please run code snippet at full page and then reduce screen size (356px for example).
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
Solved! ...added code + eddited snippet, feel free to try :)
Edit1: There´s aboutqi class which is set to display: table and margin: auto. On wide screen there is only one row and margin works perfect = it´s centered. But when there are 2 or 3 rows margin stop works and aboutqiitems are not centered.
.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>
Example: http://www.dcit.sk/ ... almost at the bottom of the page

Answer 1

You should use media queries in your CSS sheet to help with this. It looks like your numbers are splitting onto 2 rows around 616px, so you want to do something along the following lines:
#media screen and (max-width: 616px) {
.aboutqiitems {
width: 100%;
}
.aboutqiitem {
display: block;
clear: both;
width: 100%;
}
}
Here is a jsfiddle that shows the extra code and how it works: https://jsfiddle.net/4be1k4jr/
You can read more about media queries and how to use them here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
If you're looking to keep the boxes at 200px instead of 100% (in case you have images or something) you can use the following media query. It's a little less clean, but works if you absolutely must keep 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

From what I'm taking from this question, you want to change the css when the screen width gets to a certain width. The easiest way to do this is with an #media tag.
Here's my css solution to this problem.
<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>
Keep in mind that you also need to set a viewport width with a meta tag in your head tag.
<meta content="width=device-width" name="viewport">
This would also work:
#media only screen and (max-width: 615px){
.aboutqiitems{
float: none;
}
.aboutqiitem{
float: none;
margin: auto;
}
.num-center-last{
position: inherit;
}
}