Question

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

定位我的按钮时

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

提前谢谢你罗伯特

Answer 1

margin: auto;无效的原因是因为您的按钮有position: absolute;

当然你想要解决这个问题而不必改变元素的位置。使用position: absolute;，您可以使用左和右属性： left: 0;和right: 0;这将使一个元素居中，其绝对位置相对于其父级的（宽度）具有相对位置。

在整页中查看下面的代码段，以获得更好的视图。

.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;
    left: 0; /* added */
    right: 0; /* added */
    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;
}

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

保证金 - 好奇的行为

1 个答案: