How To Center Horizontal Table-cell

I want the Content A, Content B, and Content C columns to be horizontally centered. I have this code been trying to add http://jsfiddle.net/hsX5q/24/ HTML:margin: 0 auto to .colum

Solution 1:

If you add text-align: center to the declarations for .columns-container then they align centrally:

.columns-container {
    display: table-cell;
    height: 100%;
    width:600px;
    text-align: center;
}

/*************************
 * Sticky footer hack
 * Source: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
 ************************//* Stretching all container's parents to full height */html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
/* Setting the container to be a table with maximum width and height */#container {
  display: table;
  height: 100%;
  width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */.section {
  display: table-row;
  height: 1px;
}
/* The last-but-one section should be stretched to automatic height */.section.expand {
  height: auto;
}
/*************************
 * Full height columns
 ************************//* We need one extra container, setting it to full width */.columns-container {
display: table-cell;
height: 100%;
width:600px;
text-align: center;
}
/* Creating columns */.column {
  /* The float:left won't work for Chrome for some reason, so inline-block */display: inline-block;
  /* for this to work, the .column elements should have NO SPACE BETWEEN THEM */vertical-align: top;
  height: 100%;
  width: 100px;
}
/****************************************************************
 * Just some coloring so that we're able to see height of columns
 ****************************************************************/header {
  background-color: yellow;
}
#a {
  background-color: pink;
}
#b {
  background-color: lightgreen;
}
#c {
  background-color: lightblue;
}
footer {
  background-color: purple;
}

<divid="container"><headerclass="section">
    foo
  </header><divclass="section expand"><divclass="columns-container"><divclass="column"id="a"><p>Contents A</p></div><divclass="column"id="b"><p>Contents B</p></div><divclass="column"id="c"><p>Contents C</p></div></div></div><footerclass="section">
    bar
  </footer></div>

This does, though, require that you reset the .column elements to text-align: left (assuming you want them left-aligned, obviously (JS Fiddle demo).

Solution 2:

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><divclass="centered">
        Anything: text, controls, etc... will be horizontally centered.
    </div></td>

Solution 3:

Short snippet for future visitors - how to center horizontal table-cell (+ vertically)

html, body {
  width: 100%;
  height: 100%;
}

.tab {
  display: table;
  width: 100%;
  height: 100%;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* the key */background-color: #EEEEEE;
}

.content {
  display: inline-block; /* important !! */width: 100px;
  background-color: #00FF00;
}

<divclass="tab"><divclass="cell"><divclass="content"id="a"><p>Content</p></div></div></div>

Solution 4:

Just add this class in your css

.columnp{
   text-align:center;
}