我想要一個頁面高度爲50％的按鈕，但是當我添加style =「margin-top：50％;」時該按鈕被放置在頁面的底部....頁邊距不會正常工作

這裏是我的代碼：

html body { 
 
    background: url("images/backgroundmkb.jpg") no-repeat fixed; 
 
    background-size: 100% 100%; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.js"> 
 
    </script> 
 
</head> 
 

 
<body style=" margin:0; padding:0;"> 
 
    <div class="container" style="width:100%;"> 
 
    <div class="row"> 
 
     <div class="col-lg-12" style="margin-top:50%;"> 
 
     <a href="startscherm"> 
 
      <center> 
 
      <button class="btn btn-danger">Terug naar start</button> 
 
      </center> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-10-10 Sander van Hoogdalem

不能使用高度的百分比保證金&填充。這是因爲瀏覽器將根據母公司的寬度計算百分比，即使對於-top和-bottom屬性也是如此。

相反，您可以使用絕對定位或flex。

絕對定位

position: absolute; 
top: 50%; 
transform: translateY(-50%);

的Flex

.container { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

來源

2016-10-10 12:41:18 opatut

更改margin-top:50%到margin-top:25%;

<style> 
 
html body { 
 
background:url("images/backgroundmkb.jpg") no-repeat fixed; 
 
background-size:100% 100%; 
 
} 
 
</style> 
 
<html lang="en"> 
 
<head> 
 
<title></title> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.js"> </script> 
 
</head> 
 
    <body style=" margin:0; padding:0;"> 
 
    <div class="container" style="width:100%;"> 
 
    <div class="row"> 
 
    <div class="col-lg-12" style="margin-top:25%;"> 
 
    <a href="startscherm"><center><button class="btn btn-danger">Terug naar start</button></center></a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-10-10 12:31:40

這樣的作品，很好。但是當我說margin-top時，怎麼可能：50％按鈕放在底部？ –

html body { 
 
    background: url("images/backgroundmkb.jpg") no-repeat fixed; 
 
    background-size: 100% 100%; 
 
    height:100%; 
 
} 
 
.outer { 
 
    display: table; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

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

 
.inner { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.js"> 
 
    </script> 
 
</head> 
 

 
<body style=" margin:0; padding:0;"> 
 
<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner"> <a href="startscherm"> 
 
     <center> 
 
     <button class="btn btn-danger">Terug naar start</button> 
 
     </center> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 

 
</html>

來源

2016-10-10 12:38:44 Arun

<style> 
 
html body { 
 
background:url("images/backgroundmkb.jpg") no-repeat fixed; 
 
background-size:100% 100%; 
 
} 
 
</style> 
 
<html lang="en"> 
 
<head> 
 
<title></title> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.js"> </script> 
 
</head> 
 
    <body style=" margin:0; padding:0;"> 
 
    <center style="position:absolute; top:50%; left:50%;"><button class="btn btn-danger" style="height:50px; width:200px; margin-left:-100px; margin-top:-25px;">Terug naar start</button></center> 
 
</body> 
 
</html>

來源

2016-10-10 12:41:59 fourfourtwo

雖然此代碼片段可能會解決問題，但[包括解釋]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）確實有助於提高帖子的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。 – andreas

，如果你能大小一個簡單的解決您的div：

父元素應該有這樣的CSS：

height: 200px; //your size 
line-height: 200px; //your size 
text-align: center;

按鈕應具備：

vertical-align: middle;

<html lang="en"> 
 

 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.js"> 
 
    </script> 
 
</head> 
 

 
<body style="background-color:grey"> 
 
    <div class="container"> 
 
     <div class="row" style="height:200px;line-height:200px;text-align:center;"> 
 
      <button class="btn btn-danger" style="vertical-align: middle">Terug naar start</button> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-10-10 12:42:33 Mistalis

頁邊距不會正常工作

回答

絕對定位

的Flex

相關問題