Question

我正在尝试在我的简单网页上添加一个按钮。按钮本身看起来很棒，但我不太清楚如何定位它。我希望它能够居中并位于正文下方。它目前位于左侧。有关如何这样做的任何想法吗？

<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>

<style>

    #logo {
        width: 100%;
        text-align: center;
        padding: 10em 0 0.2em 0;
        font-family: lato;
    }

    #sub {
        color: #fff;
        font-family: lato;
        text-align: center;
        word-spacing: 5em;
    }

    .button {
        background-color: #3b3d45;
        border: 6px solid #fff080;
        display: inline-block;
        cursor: pointer;
        color: #ffffff;
        font-family: Arial;
        font-size: 12px;
        padding: 15px 20px;
        text-decoration: none;
        margin: auto;
        text-align: center;
    }

    .button:hover {
        background-color: #707488;
    }
</style>
</head>

<body>
<div class id="logo">
    <h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
    <p>Designer Typographer Entrepreneur </p>
</div>

<a href="#" class="button">Learn More</a>
</body>

</html>

非常感谢任何帮助。谢谢！

Answer 1

您不一定需要容器。请尝试以下方法：

.button {
    background-color: #3b3d45;
    border: 6px solid #fff080;
    display: block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 12px;
    padding: 15px 20px;
    text-decoration: none;
    margin: auto;
    text-align: center;
    width: 62px;
}

自动边距不适用于内联块元素。

Answer 2

您可以向按钮添加容器并将它们对齐到中心。见下面的例子

当您尝试创建样式时也是如此。尽量使它们可以重复使用。这样做的一个优点是你可以编写较小的CSS。

#logo {
  width: 100%;
  text-align: center;
  padding: 10em 0 0.2em 0;
  font-family: lato;
}

#sub {
  color: #fff;
  font-family: lato;
  text-align: center;
  word-spacing: 5em;
}

.button {
  background-color: #3b3d45;
  border: 6px solid #fff080;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 12px;
  padding: 15px 20px;
  text-decoration: none;
  margin: auto;
  text-align: center;
}

.button:hover {
  background-color: #707488;
}
.text-center {
  text-align: center;
}

<div class id="logo">
    <h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
    <p>Designer Typographer Entrepreneur </p>
</div>
<div class="text-center">
  <a href="#" class="button">Learn More</a>
</div>

Answer 3

尝试将按钮放在<div>中并制作text-align:center

<div class="btnContainer ">
    <a href="#" class="button">Learn More</a>
</div>

<style>
    .btnContainer {
        text-align:center;
    }
</style>

Answer 4

如果没有额外的标记，将以下规则添加到.button就可以了解

left: 50%;
position: absolute;
transform: translate(-50%, 0);

Answer 5

<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>

<style>

    #logo {
        width: 100%;
        text-align: center;
        padding: 10em 0 0.2em 0;
        font-family: lato;
    }

    #sub {
        color: #fff;
        font-family: lato;
        text-align: center;
        word-spacing: 5em;
    }

    .button {
        background-color: #3b3d45;
        border: 6px solid #fff080;
        display: inline-block;
        cursor: pointer;
        color: #ffffff;
        font-family: Arial;
        font-size: 12px;
        padding: 15px 20px;
        text-decoration: none;
        margin: auto;

    }

    .button:hover {
        background-color: #707488;
    }
    #button {
        text-align: center;
    }
</style>
</head>

<body>
<div class id="logo">
    <h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
    <p>Designer Typographer Entrepreneur </p>
</div>
<div class id="button">
    <a href="#" class="button">Learn More</a>
</div>
</body>

</html>

你怎么这么想？

如何使用CSS将按钮居中？

5 个答案: