Html 如何居中水平表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16226625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center horizontal table-cell
提问by Daniel
I want the Content A, Content B, and Content C columns to be horizontally centered. I have this code been trying to add
我希望内容 A、内容 B 和内容 C 列水平居中。我一直在尝试添加此代码
HTML:margin: 0 auto to .columns-container and it doesn't work. Could anyone help?
HTML:margin: 0 auto to .columns-container 它不起作用。有人可以帮忙吗？
/*************************
* 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>回答by David says reinstate Monica
If you add text-align: centerto the declarations for .columns-containerthen they align centrally:
如果添加text-align: center到声明中，.columns-container则它们会集中对齐：
.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>This does, though, require that you reset the .columnelements to text-align: left(assuming you wantthem left-aligned, obviously (JS Fiddle demo).
但是，这确实需要您将.column元素重置为text-align: left（假设您希望它们左对齐，显然（JS Fiddle 演示）。
回答by B-GangsteR
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;
}<div class="tab">
<div class="cell">
<div class="content" id="a">
<p>Content</p>
</div>
</div>
</div>回答by David
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...
有时，您希望将表格单元格中的文本以外的内容水平居中。为了做到这一点，首先设置一些css...
<style>
div.centered {
margin: auto;
width: 100%;
display: flex;
justify-content: center;
}
</style>
Then declare a divwith class="centered"inside each table cell you want centered.
然后在您想要居中的每个表格单元格内声明一个divwith class="centered"。
<td>
<div class="centered">
Anything: text, controls, etc... will be horizontally centered.
</div>
</td>
回答by Rush.2707
Just add this class in your css
只需在你的css中添加这个类
.column p{
text-align:center;
}
