我想要内容A,内容B和内容C列水平居中.我有这个代码试图添加
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).