I want the Content A, Content B, and Content C columns to be horizontally centered. I have this code been trying to add
HTML:margin: 0 auto to .columns-container and it doesn't work. Could anyone help?
/*************************_x000D_
* Sticky footer hack_x000D_
* Source: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/_x000D_
************************/_x000D_
_x000D_
/* Stretching all container's parents to full height */_x000D_
_x000D_
html,_x000D_
body {_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
}_x000D_
/* Setting the container to be a table with maximum width and height */_x000D_
_x000D_
#container {_x000D_
display: table;_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
}_x000D_
/* All sections (container's children) should be table rows with minimal height */_x000D_
_x000D_
.section {_x000D_
display: table-row;_x000D_
height: 1px;_x000D_
}_x000D_
/* The last-but-one section should be stretched to automatic height */_x000D_
_x000D_
.section.expand {_x000D_
height: auto;_x000D_
}_x000D_
/*************************_x000D_
* Full height columns_x000D_
************************/_x000D_
_x000D_
/* We need one extra container, setting it to full width */_x000D_
_x000D_
.columns-container {_x000D_
display: table-cell;_x000D_
height: 100%;_x000D_
width: 300px;_x000D_
margin: 0 auto;_x000D_
}_x000D_
/* Creating columns */_x000D_
_x000D_
.column {_x000D_
/* The float:left won't work for Chrome for some reason, so inline-block */_x000D_
display: inline-block;_x000D_
/* for this to work, the .column elements should have NO SPACE BETWEEN THEM */_x000D_
vertical-align: top;_x000D_
height: 100%;_x000D_
width: 100px;_x000D_
}_x000D_
/****************************************************************_x000D_
* Just some coloring so that we're able to see height of columns_x000D_
****************************************************************/_x000D_
_x000D_
header {_x000D_
background-color: yellow;_x000D_
}_x000D_
#a {_x000D_
background-color: pink;_x000D_
}_x000D_
#b {_x000D_
background-color: lightgreen;_x000D_
}_x000D_
#c {_x000D_
background-color: lightblue;_x000D_
}_x000D_
footer {_x000D_
background-color: purple;_x000D_
}<div id="container">_x000D_
<header class="section">_x000D_
foo_x000D_
</header>_x000D_
_x000D_
<div class="section expand">_x000D_
<div class="columns-container">_x000D_
<div class="column" id="a">_x000D_
<p>Contents A</p>_x000D_
</div>_x000D_
<div class="column" id="b">_x000D_
<p>Contents B</p>_x000D_
</div>_x000D_
<div class="column" id="c">_x000D_
<p>Contents C</p>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<footer class="section">_x000D_
bar_x000D_
</footer>_x000D_
</div>Short snippet for future visitors - how to center horizontal table-cell (+ vertically)
html, body {_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.tab {_x000D_
display: table;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.cell {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
text-align: center; /* the key */_x000D_
background-color: #EEEEEE;_x000D_
}_x000D_
_x000D_
.content {_x000D_
display: inline-block; /* important !! */_x000D_
width: 100px;_x000D_
background-color: #00FF00;_x000D_
}<div class="tab">_x000D_
<div class="cell">_x000D_
<div class="content" id="a">_x000D_
<p>Content</p>_x000D_
</div>_x000D_
</div>_x000D_
</div>Sometimes you have things other than text inside a table cell that you'd like to be horizontally centered. In order to do this, first set up some css...
<style>
div.centered {
margin: auto;
width: 100%;
display: flex;
justify-content: center;
}
</style>
Then declare a div with class="centered" inside each table cell you want centered.
<td>
<div class="centered">
Anything: text, controls, etc... will be horizontally centered.
</div>
</td>
Just add this class in your css
.column p{
text-align:center;
}
Source: Stackoverflow.com