Question

我想垂直居中我的容器。有人知道如何使用Skeleton样板吗？我尝试了一些东西，但它仍然保持在顶部而不是垂直对齐。希望有人可以帮助我:)）

HTML：

<div class="container"> <div class="sixteen columns"> <h1 class="remove-bottom"></h1> </div> <div class="one-third column"> <div class="middle-wrapper"> </div> </div> <div class="one-third column"> <div class="middle-wrapper"> </div> </div> <div class="one-third column"> <div class="middle-wrapper"> </div> </div> </div>

CSS：

/ * Base 960 Grid * /

.container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row                                        { margin-bottom: 20px; }

Answer 1

有些浏览器喜欢'margin：0px auto'。

更改保证金：0自动到'保证金：0px自动;'

Answer 2

try this. not for skeleton framework though. An example -better dont override container and column classes Have new classes for them and override

 <div class="container top">
   <div class="between"
      <div class="sixteen columns middle">
         <h1 class="remove-bottom"></h1>
      </div>
         <div class="one-third column">
           <div class="middle-wrapper">
           </div>

         </div>
         <div class="one-third column">
           <div class="middle-wrapper">
           </div>

         </div>

         <div class="one-third column">
           <div class="middle-wrapper">
           </div>
          </div>
         </div>
     </div>

CSS

 .top{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
   }

   .between{
   display: table-cell;
vertical-align: middle;
  }

 .middle{
  margin: 10px auto;
  width: 960px;
}

使用Skeleton Boilerplate;垂直对齐容器

2 个答案: