绝对定位

Question

我想要一个50％高度的按钮，但是当我添加style =＆＃34; margin-top：50％;＆＃34;按钮位于页面底部....

这是我的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

将margin-top:50%更改为margin-top:25%;

＆＃13;

<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>

＆＃13;

Answer 2

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>

Answer 3

你不能使用高度百分比和边距＆amp;填充。这是因为浏览器将根据父级的 width 计算百分比，即使对于-top和-bottom属性也是如此。

相反，您可以使用绝对定位或弹性。

绝对定位

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

的Flex

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

Answer 4

<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>

Answer 5

如果您可以调整div：

的大小，这是一个简单的解决方案

父元素应该有这个CSS：

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

按钮应该有：

vertical-align: middle;

＆＃13;

<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>

＆＃13;

保证金顶部不能正常工作

5 个答案:

绝对定位

的Flex