页边距不会正常工作
问题描述:
我想要一个页面高度为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>
答
不能使用高度的百分比保证金&填充。这是因为浏览器将根据母公司的宽度计算百分比,即使对于-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;
}
答
更改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>
答
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>
答
<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>
+0
虽然此代码片段可能会解决问题,但[包括解释](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>
这样的作品,很好。但是当我说margin-top时,怎么可能:50%按钮放在底部? –