时间戳

首页 > 解决方案 > 边距 - 好奇的行为

html - 边距 - 好奇的行为

问题描述

我有以下问题。当我尝试使用

margin: 0 auto;

它将按钮固定在左侧。如果我输入任何数字，例如。

margin: 0 100px;

它确实有效。我很好奇我错过了什么？我有

display: block;
width: 200px;

我想补充一点，我需要将此按钮放置在容器的底部。屏幕底部边缘和屏幕中间的 3%。

这是我的 HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
    <div class="container">
        <div class="group">
            <div class="element">

            </div>
        </div>
        <a href="#" class="btn">button</a>
    </div>
</body>
</html>

和 CSS

.container {
    width: 1100px;
    height: 100vh;
    margin: 0 auto;
    background-color: black;
    position: relative;
}

.group {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(53, 20, 131);
    position: absolute;
}

.element {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    background-color: rgb(131, 20, 44);
    position: absolute;
}

.btn {
    display: block;
    position: absolute;
    bottom: 3%;
    width: 200px;
    height: 46px;
    margin: 0 auto;
    border: 1px solid #fff;
    text-align: center;
    text-transform: capitalize;
    padding: 14px 0 0 0;
    font-size: 1em;
    font-weight: 100;
    text-decoration: none;
    color: rgb(119, 20, 20);
    border-radius: 25px;
    letter-spacing: 3px;
}

提前谢谢你罗伯特

标签： htmlcssmargin

解决方案

如果您想将其居中，则因为绝对位置，请尝试将其添加到您的代码中：

.btn{
left: 50%;
transform: translateX(-50%);

}

推荐阅读