中心內容引導柱

我的問題是如何在中心爲中心的自舉列的內容垂直，當我設置width: 100%和height: 100%用於覆蓋div中有什麼解決方案出現的問題：中心內容引導柱

示例圖片我需要做的：

下面是我的代碼：

var coverSection = $(".cover-table"); 
 
    $(coverSection).height($(window).height());

.cover-table{ 
 
    display:table; 
 
    width:100%; 
 
    text-align:center; 
 
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg"); 
 
    background-size:cover; 
 
    background-attachment:fixed; 
 
    color:white; 
 
    .cover-cell{ 
 
     display:table-cell; 
 
     vertical-align:middle; 
 
     .overlay{ 
 
      width:100%; 
 
      height:100%; 
 
      background-color:rgba(22, 22, 22, 0.80); 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<section class="cover-table"> 
 
    <div class="cover-cell"> 
 
     <div class="overlay"> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-sm-12"> 
 
         <div class="cover-nested"> 
 
          <h4>Hello World</h4> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

注：請整版

來源

2017-01-19 MoHamed HaSsn

通過這個鏈接，也許它可以幫助你[網站鏈接]（http://tutorialzine.com/2015/09/quick-tip-the-simplest-way-到中心的元素，垂直和水平/）。 –

這很實用https://www.w3.org/Style/Examples/007/center.en.html –

謝謝你，你不能使用位置來居中垂直居中，這種方法無效 –

使用Flex運行的代碼片段。編輯您的cover-table如下：

.cover-table{ 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}

這裏的工作片段。

var coverSection = $(".cover-table"); 
 
    $(coverSection).height($(window).height());

.cover-table{ 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    width:100%; 
 
    text-align:center; 
 
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg"); 
 
    background-size:cover; 
 
    background-attachment:fixed; 
 
    color:white; 
 
    .cover-cell{ 
 
     display:table-cell; 
 
     vertical-align:middle; 
 
     .overlay{ 
 
      width:100%; 
 
      height:100%; 
 
      background-color:rgba(22, 22, 22, 0.80); 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<section class="cover-table"> 
 
    <div class="cover-cell"> 
 
     <div class="overlay"> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-sm-12"> 
 
         <div class="cover-nested"> 
 
          <h4>Hello World</h4> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

來源

2017-01-19 05:45:08 ab29007

謝謝但我Think舊版瀏覽器不支持Flex屬性 –

好的。讓我解決這個問題。 – ab29007

我曾經使用位置絕對中心子Div但這不適用於Bootstrap，如果我嘗試這樣做，問題將出現 –

當您使用display:table爲.cover-table那麼你可以設置display:table-row到.cover-cell和display:table-cellvertical-align:middle到.overlay。

var coverSection = $(".cover-table"); 
 
    $(coverSection).height($(window).height());

.cover-table{ 
 
    display:table; 
 
    width:100%; 
 
    text-align:center; 
 
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg"); 
 
    background-size:cover; 
 
    background-attachment:fixed; 
 
    color:white; 
 
} 
 
.cover-cell{ 
 
    display:table-row; 
 
} 
 
.overlay{ 
 
    width:100%; 
 
    height:100%; 
 
    background-color:rgba(22, 22, 22, 0.80); 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<section class="cover-table"> 
 
    <div class="cover-cell"> 
 
     <div class="overlay"> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-sm-12"> 
 
         <div class="cover-nested"> 
 
          <h4>Hello World</h4> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

來源

2017-01-19 05:48:59

祕密代碼：

.overlay { 
    height: 100vh; 
    width: 100vw; 
    position: relative; 
    color: #fff; 
    background: rgba(0, 0, 0, 0.5); 
} 

.overlay .container{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

// Unneeded, see CSS note 
 
//var coverSection = $(".cover-table"); 
 
// $(coverSection).height($(window).height());

.cover-table { 
 
    display: table; 
 
    height: 100vh; 
 
    /* This has the same effect as JS code. */ 
 
    width: 100%; 
 
    text-align: center; 
 
    background-image: url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg"); 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    color: white; 
 
    .cover-cell { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    .overlay { 
 
     width: 100%; 
 
     height: 100%; 
 
     background-color: rgba(22, 22, 22, 0.80); 
 
    } 
 
    } 
 
} 
 
.overlay { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: relative; 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 

 
.overlay .container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<section class="cover-table"> 
 
    <div class="cover-cell"> 
 
    <div class="overlay"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"> 
 
      <div class="cover-nested"> 
 
       <h4>Hello World</h4> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2017-01-19 05:59:14

只需添加這個CSS和文本將調整中心。

CSS：

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

來源

2017-01-19 07:05:07

中心內容引導柱

回答

相關問題