So zentrieren Sie eine horizontale Tabellenzelle

Question 1

Ich möchte, dass die Spalten Inhalt A, Inhalt B und Inhalt C horizontal zentriert sind. Ich habe versucht, diesen Code hinzuzufügen

http://jsfiddle.net/hsX5q/24/

HTML:margin: 0 auto to .columns-container und es funktioniert nicht. Könnte jemand helfen?

/*************************
 * 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: 300px;
  margin: 0 auto;
}
/* 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;
}

<div id="container">
  <header class="section">
    foo
  </header>

  <div class="section expand">
    <div class="columns-container">
      <div class="column" id="a">
        <p>Contents A</p>
      </div>
      <div class="column" id="b">
        <p>Contents B</p>
      </div>
      <div class="column" id="c">
        <p>Contents C</p>
      </div>
    </div>
  </div>

  <footer class="section">
    bar
  </footer>
</div>

Question 2

Wenn Sie hinzufügen text-align: center zu den Erklärungen für .columns-container dann richten sie sich zentral aus:

.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;
}

<div id="container">
  <header class="section">
    foo
  </header>

  <div class="section expand">
    <div class="columns-container">
      <div class="column" id="a">
        <p>Contents A</p>
      </div>
      <div class="column" id="b">
        <p>Contents B</p>
      </div>
      <div class="column" id="c">
        <p>Contents C</p>
      </div>
    </div>
  </div>

  <footer class="section">
    bar
  </footer>
</div>

Dies erfordert jedoch, dass Sie die zurücksetzen .column Elemente zu text-align: left (vorausgesetzt du wollen sie linksbündig, offensichtlich (JS Fiddle-Demo).

Question 3

Manchmal haben Sie andere Dinge als Text in einer Tabellenzelle, die Sie gerne horizontal zentriert haben möchten. Um dies zu tun, richten Sie zuerst etwas CSS ein …

<style>
    div.centered {
        margin: auto;
        width: 100%;
        display: flex;
        justify-content: center;
    }
</style>

Dann deklariere a div mit class="centered" in jeder Tabellenzelle, die Sie zentrieren möchten.

<td>
    <div class="centered">
        Anything: text, controls, etc... will be horizontally centered.
    </div>
</td>

Question 4

Kurzer Ausschnitt für zukünftige Besucher – wie man horizontale Tabellenzellen zentriert (+ vertikal)

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

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

Question 5

Fügen Sie diese Klasse einfach in Ihr CSS ein

.column p{
   text-align:center;
}