So zentrieren Sie die horizontale Tabellenzelle

Ich möchte, dass die Spalten Inhalt A, Inhalt B und Inhalt C horizontal zentriert sind. Ich habe diesen CodeSo zentrieren Sie die horizontale Tabellenzelle

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

HTML hinzuzufügen versucht: margin: 0 auto .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>

Quelle

2013-04-25 Daniel

Side-note : Da '.columns-container' als Tabellenzelle angezeigt wird, können keine Ränder angewendet werden, weshalb dieser Trick hier nicht funktioniert. – animuson

Wenn Sie text-align: center auf die Erklärungen hinzufügen, für .columns-container dann richten sie zentral:

.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 .column Elemente auf text-align: left zurücksetzen (vorausgesetzt, Sie wollen sie linksbündig, offensichtlich (JS Fiddle demo).

Quelle

2013-04-26 00:03:21

funktioniert gut, danke :) – Daniel

dies hatte mich für einen Moment verwirrt, als ich versuche, das gleiche zu erreichen, aber die Breite in der oben genannten Klasse ist redundant, dass Zelle ist tatsächlich 100% Breite. Tischzellen scheinen leider so viel horizontalen Raum wie möglich aufzunehmen. – Dave

Vergessen Sie nicht, dass '' column '' 'display: inline-block;' 'sein muss, damit dies funktioniert. Das OP hatte das schon, aber andere fragen sich vielleicht, warum die Antwort für sie nicht nur mit 'text-align: center;' funktioniert – poshest

Fügen Sie einfach diese Klasse in Ihrem css

.column p{ 
    text-align:center; 
}

Quelle

2016-07-13 02:40:37

Kurz Schnipsel für zukünftige Besucher - wie horizontale Tisch-Zelle zum Zentrum (+ 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>

Quelle

2017-11-22 07:31:54

So zentrieren Sie die horizontale Tabellenzelle

Antwort

Verwandte Themen