Question

我一直在尝试找出如何将链接对齐到中心。这就是我在代码中得到的。

    <div class="cont">
  <div class="form sign-in">
    <h2>Welcome back,</h2>
    <label>
      <span>Email</span>
      <input type="email" />
    </label>
    <label>
      <span>Password</span>
      <input type="password" />
    </label>
    <a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>
    <button type="button" class="submit">Sign In</button>
    <button type="button" class="fb-btn">Connect with <span>facebook</span></button>
  </div>

这是我的“忘记通过”类的css代码

.forgot-pass {
   margin-top: 15px;
   text-align: center;
   font-size: 12px;
   color: #cfcfcf;
}
    .cont {
  overflow: hidden;
  position: relative;
  width: 1200px;
  height: 550px;
  margin: 0 auto 100px;
  background: #fff;
}
.form {
  position: relative;
  width: 640px;
  height: 100%;
  transition: -webkit-transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out;
  transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
  padding: 50px 30px 0;
 }

我已经尝试过此代码

<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>

css类.forgot-pass已被应用，但text-align:center是唯一未应用的类。

我做错了什么吗？还是另一个我可以把它放在中心的东西？

Answer 1

将链接放在p标签内。您的CSS不需要跨度：

.forgot-pass {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #cfcfcf;
}

.forgot-pass a:link,
.forgot-pass a:visited {
  color: #cfcfcf;
}

.forgot-pass a:hover,
.forgot-pass a:active {
  color: gold;
}

<p class="forgot-pass"><a href="facebook.com">Forgot password?</a></p>

Answer 2

    .forgot-pass {
       margin-top: 15px;
       text-align: center;
       font-size: 12px;
       color: #cfcfcf;
      display: block;
    }

<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>

将显示块添加到跨度

.forgot-pass {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #cfcfcf;
  display: block;
}

<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>

Answer 3

在第二个示例中，问题是由两个元素都是内联元素引起的。内联元素将仅占用内容所需的水平空间。结果，设置text-align: center;将不会产生可见的效果，因为文本只会在元素中居中，该元素与文本本身的大小相同。要使文本在页面中居中，您可以手动设置元素的位置（例如position: absolute），也可以将其设置为block元素。

以下代码将使链接在页面上居中：

.forgot-pass {
   margin-top: 15px;
   text-align: center;
   font-size: 12px;
   color: #cfcfcf;
   display: block;
}

<a href="facebook.com" class="forgot-pass">Forgot password?</a>

Answer 4

您可以这样做

<body>
    <p class="forgot-pass">
        <a href="facebook.com">Forgot password?</a>
    </p>
</body>

.forgot-pass {
            margin-top: 15px;
            text-align: center;
            font-size: 12px;
            color: #cfcfcf;
        }

如何对齐链接到中心？

4 个答案: