Html 文本对齐：居中不工作（<；a>；但在<；h1>；

我有一个非常简单直接的表格：

<form action="{{ path("fos_user_security_check") }}" method="post">
    <h1>Title</h1>

    <input class="input" type="text" name="_username" placeholder="{{ 'security.login.username'|trans }}"
           value="{{ last_username }}" required />
    <input class="input" type="password" name="_password"
           placeholder="{{ 'security.login.password'|trans }}" required />
    <input type="checkbox" id="remember_me" name="_remember_me" value="on" />
    <label class="text" for="remember_me">
        {{ 'security.login.remember_me'|trans }}
    </label>
    {% if error %}
        <div class="err">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
    {% endif %}
    <button>{{ 'security.login.submit'|trans }}</button>
    <a href="{{ path('fos_user_resetting_request') }}">Forgot your password?</a>
</form>

“我的文本对齐：中心”在

上工作得很好，但为什么它不适用于我的

链接？我不明白。有人能帮忙吗，或者解释一下原因？这种简单的设计并不是真的很复杂。

您可以将其包装在一个div中：

<div style="text-align:center;">
  <a href="{{ path('fos_user_resetting_request') }}">Forgot your password?</a>
</div>

---

文本很可能居中，但锚点是内联元素，因此具有内容的宽度。 尝试以下操作（添加：显示：块）：

---

text align:center

应用于标记的内容

h1

是块元素，因此占据整个宽度。这就是其中的内容可以居中的原因

a

是一个内联元素，宽度仅是标记中包含的内容，这就是它不能居中的原因

您可以使用块元素包装

a

---

或者给它一个

显示：block

试试这个@billahmed

元素在HTML5中已经过时了。试试这个。。。LOL自HTML5起，

align

属性已过时。

<div style="text-align:center;">
  <a href="{{ path('fos_user_resetting_request') }}">Forgot your password?</a>
</div>

  a{
    display:block;
    text-align:center;
}

form a {
   color: #919191;
   font-size: 14px;
   text-align: center;
   text-decoration: none;
   display:block
}