How to center horizontal table-cell

Question

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  columns-container and it doesn t work  Could anyone help    x000D   x000D                             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    x000D   lt div id  container  gt  x000D     lt header class  section  gt  x000D      foo x000D     lt  header gt  x000D   x000D     lt div class  section expand  gt  x000D       lt div class  columns-container  gt  x000D         lt div class  column  id  a  gt  x000D           lt p gt Contents A lt  p gt  x000D         lt  div gt  x000D         lt div class  column  id  b  gt  x000D           lt p gt Contents B lt  p gt  x000D         lt  div gt  x000D         lt div class  column  id  c  gt  x000D           lt p gt Contents C lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt footer class  section  gt  x000D      bar x000D     lt  footer gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

_x000D_

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_
}

_x000D_

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

_x000D_

User · Answer

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      lt style gt      div centered           margin  auto          width  100           display  flex          justify-content  center         lt  style gt    Then declare a div with class  centered  inside each table cell you want centered    lt td gt       lt div class  centered  gt          Anything  text  controls  etc    will be horizontally centered       lt  div gt   lt  td gt

User · Answer

Just add this class in your css    column p     text-align center

User · Answer

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       x000D   x000D                             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 600px  x000D  text-align  center  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    x000D   lt div id  container  gt  x000D     lt header class  section  gt  x000D      foo x000D     lt  header gt  x000D   x000D     lt div class  section expand  gt  x000D       lt div class  columns-container  gt  x000D         lt div class  column  id  a  gt  x000D           lt p gt Contents A lt  p gt  x000D         lt  div gt  x000D         lt div class  column  id  b  gt  x000D           lt p gt Contents B lt  p gt  x000D         lt  div gt  x000D         lt div class  column  id  c  gt  x000D           lt p gt Contents C lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt footer class  section  gt  x000D      bar x000D     lt  footer gt  x000D   lt  div gt  x000D   x000D   x000D    This does  though  require that you reset the  column elements to text-align  left  assuming you want them left-aligned  obviously  JS Fiddle demo

[html] How to center horizontal table-cell

Examples related to html

Examples related to css