html – 如何中心水平表格单元格
发布时间：2020-12-14 19:32:29 所属栏目：资源 来源：网络整理
导读：我想要内容A,内容B和内容C列水平居中.我有这个代码试图添加 http://jsfiddle.net/hsX5q/24/ HTML：margin：0 auto to .columns-container并且它不起作用.有人可以帮忙吗？ /************************* * Sticky footer hack * Source: http://pixelsvsbytes.
|
我想要内容A,内容B和内容C列水平居中.我有这个代码试图添加
http://jsfiddle.net/hsX5q/24/ 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>
解决方法
如果在.columns-container的声明中添加text-align：center,则它们将集中对齐：
.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,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,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>
但是,这样做需要将.column元素重置为text-align：left(假设您希望它们左对齐,显然(JS Fiddle demo). （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |