我想要一个页面高度为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

相关问题