Question

我想将按钮放在中间位置。我尝试使用

margin: 0 auto;

但没有任何反应。代码如下：

Why does margin: 0 auto; doesnt work?

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 0 auto;  <!--Why margin: 0 auto; doesnt work?  -->
}
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


a:hover, a:active {
    background-color: red;
}
</style>
</head>
<body>

<div><a href="https://www.google.com" target="_blank">This is a link</a></div>

</body>
</html>

＆＃13;

Answer 1

这是代码。边距0 auto无效，因为你的div使用了100％的体宽。一旦将其设置为小于100％，它就会自动调整。

＆＃13;

body, html{
  width: 99%;  
}

div {
    margin: 0 auto;  
    width: 134px;
}
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


a:hover, a:active {
    background-color: red;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div><a href="https://www.google.com" target="_blank">This is a link</a></div>

</body>
</html>

＆＃13;

编辑了代码段

如何将我的链接（按钮）放在页面中间？

1 个答案: