Css 如何将链接与中心对齐？_Css_Html

Css 如何将链接与中心对齐？

css html

Css 如何将链接与中心对齐？,css,html,Css,Html,我一直在试图弄清楚如何将链接与中心对齐。这就是我的密码 <div class="cont"> <div class="form sign-in"> <h2>Welcome back,</h2> <label> <span>Email</span> <input type="email" /> </label> <la

我一直在试图弄清楚如何将链接与中心对齐。这就是我的密码

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

我试过这个密码

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

css类

.forget pass

已应用，但

文本对齐：居中

是唯一未应用的类

有什么是我做错的吗？或者我可以把它放在中间的另一个？

将链接放在

标记中。CSS不需要跨度：

。忘记通行证{
边缘顶部：15px；
文本对齐：居中；
字体大小：12px；
颜色：#cfcfcf；
}
.忘记传递a:链接，
a:参观了{
颜色：#cfcfcf；
}
a:悬停，
.忘记通过a:激活{
颜色：金色；
}

将链接放入

标记中。CSS不需要跨度：

。忘记通行证{
边缘顶部：15px；
文本对齐：居中；
字体大小：12px；
颜色：#cfcfcf；
}
.忘记传递a:链接，
a:参观了{
颜色：#cfcfcf；
}
a:悬停，
.忘记通过a:激活{
颜色：金色；
}

你可以这样做




.忘记通行证{
边缘顶部：15px；
文本对齐：居中；
字体大小：12px；
颜色：#cfcfcf；
}

你可以这样做




.忘记通行证{
边缘顶部：15px；
文本对齐：居中；
字体大小：12px；
颜色：#cfcfcf；
}

在第二个示例中，问题是由两个元素都是内联元素引起的。内联元素将只占用内容所需的水平空间。因此，设置

文本对齐：居中将不会产生可见效果，因为文本将仅在元素中居中，该元素的大小与文本本身相同。要使文本在页面中居中，您可以手动设置元素的位置（例如位置：绝对
），也可以将其设置为块
元素
以下代码将使页面上的链接居中：
.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>

。忘记通行证{
边缘顶部：15px；
文本对齐：居中；
字体大小：12px；
颜色：#cfcfcf；
显示：块；
}
在第二个示例中，问题是由两个元素都是内联元素引起的。内联元素将只占用内容所需的水平空间。因此，设置文本对齐：居中将不会产生可见效果，因为文本将仅在元素中居中，该元素的大小与文本本身相同。要使文本在页面中居中，您可以手动设置元素的位置（例如位置：绝对
），也可以将其设置为块
元素
以下代码将使页面上的链接居中：
.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>

。忘记通行证{
边缘顶部：15px；
文本对齐：居中；
字体大小：12px；
颜色：#cfcfcf；
显示：块；
}
您需要在a
的父级上设置text align:center
。您需要在a
的父级上设置text align:center
。为什么要在标记中包装锚定？用于段落不是吗？@ConsoleLog因为问题的原始代码包含一个p
标记。段落可以包含链接，即a
标记。但是，a
标记是内联的，p
标记是一个块，因此使用我的代码，链接可以水平居中（因为块元素的默认宽度为100%，除非它们是浮动的、弹性项或网格项）。这就足够了。虽然你想用段落来包装它只是为了集中内容：）是的，你可以在段落内有更多的内容，但通过这种方法，所有的文本也将集中。@Johannes这对我很有用，但是我怎么还能应用银色呢？@PeterFestejo我刚刚在代码中添加了我以前作为普通注释添加的内容：链接文本颜色将覆盖其容器颜色，因此您必须为链接iteslef定义它（参见我在编辑的答案中的示例）。为什么要在标记中包装锚？用于段落不是吗？@ConsoleLog因为问题的原始代码包含一个p
标记。段落可以包含链接，即a
标记。但是，a
标记是内联的，p标记是一个块，因此使用我的代码，链接可以水平居中（因为块元素的默认宽度为100%，除非它们是浮动的、弹性项或网格项）。这就足够了。虽然你想用段落来包装它只是为了集中内容：）是的，你可以在段落内有更多的内容，但通过这种方法，所有的文本也将集中。@Johannes这对我很有用，但是我怎么还能应用银色呢？@PeterFestejo我刚刚在代码中添加了我以前作为普通注释添加的内容：链接文本颜色将覆盖其容器颜色，因此您必须在display:block之后为链接iteslef（参见我在编辑的答案中的示例）定义它，而不使用分号？我不知道为什么对你有效，但对我无效。很抱歉，我错过了分号。有时，如果看不到锚元素上的内容，就很难判断。我会在Chrome dev tools或类似的工具中为锚点应用边框或背景色，并进行一些基本调试。这会将链接扩展到容器元素的整个宽度，而不是仅在“忘记密码”文本上，这可能是不需要的。为了避免这种情况，请将链接放在块元素中，并将其居中放置（请参见我答案中的片段）@ConsoleLog我已经编辑了我的问题，这是否是我仍然有相同问题的原因？显示后没有分号：blo
<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;
        }

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