1. 首頁
  2. 問答
  3. 在中間設置覆​​蓋內容

在中間設置覆​​蓋內容

2017-04-04 68 views
0

目標：
覆蓋內容應位於頁面中間。在中間設置覆​​蓋內容

問題：
我無法使覆蓋內容（白色框）位於中間。我缺少什麼語法？

謝謝！

function openNav() { 
 
    document.getElementById("myNav").style.height = "100%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.height = "0%"; 
 
}
body { 
 
    margin: 0; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.overlay { 
 
    height: 0%; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.8); 
 
    overflow-y: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 10%; 
 
    width: 70%; 
 
    text-align: left; 
 
    margin-top: 30px; 
 
    background: white 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .overlay {overflow-y: auto;} 
 
    .overlay a {font-size: 20px} 
 
    .overlay .closebtn { 
 
    font-size: 40px; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 
<h2>Fullscreen Overlay Nav Example</h2> 
 
<p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
 
<p>In this example, the navigation menu will slide downwards from the top:</p> 
 
    
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    
 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 

 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    
 
</body> 
 
</html>

來源

2017-04-04 What' sUP

+1

你想居中垂直，水平還是兩者？ [SO Docu：Centering - CSS]（https://stackoverflow.com/documentation/css/299/centering#t=201704040840007262339） –

回答

0

你可以試試這個：

.overlay-content { 
    position: relative; 
    top: 10%; 
    width: 70%; 
    text-align: left; 
    margin: 30px auto; 
    background: white 
}

來源

2017-04-04 08:41:11

+2

您無法爲「margin-top」設置多個值。速記是'margin' –

+0

對不起，我的錯誤。糾正。感謝您的評論。 –

+1

謝謝你們的幫助！ –

0

使用CSS3 translateY使集中在屏幕高度可變元件。

function openNav() { 
 
    document.getElementById("myNav").style.height = "100%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.height = "0%"; 
 
}
body { 
 
    margin: 0; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.overlay { 
 
    height: 0%; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.8); 
 
    overflow-y: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%) translateX(-50%); 
 
    width: 70%; 
 
    left: 50%; 
 
    text-align: left; 
 
    background: white; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .overlay {overflow-y: auto;} 
 
    .overlay a {font-size: 20px} 
 
    .overlay .closebtn { 
 
    font-size: 40px; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 
<h2>Fullscreen Overlay Nav Example</h2> 
 
<p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
 
<p>In this example, the navigation menu will slide downwards from the top:</p> 
 
    
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    
 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 

 
<br/>  
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    <br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>  
 
    
 
</body> 
 
</html>

來源

2017-04-04 08:39:52 mehulmpt

0 
<div id="myNav" class="overlay"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
<div class="overlay-content"> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
</div>

嗨，我覺得上面的部分是你覆蓋。對？ 然後，您可以使用以下樣式使覆蓋內容（白色框）位於中間。

.overlay { 
    position: fixed; 
    display: table; 
    float: none; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    background-color: rgba(0,0,0, 0.8); 
    transition: 0.5s; 
} 

.overlay-content { 
    vertical-align: middle; 
    display: table-cell; 
    margin: 0 auto; 
    float: none; 
    width: 70%; 
    height: auto; 
    text-align: left; 
    background: #fff; 
}

來源

2017-04-04 08:52:04

相關問題

 相關問題