Question

I have a very simple and straight forward form:

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

My CSS:

form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

form h1 {
    text-align: center;
    margin: 0 0 15px;
    padding: 0;
    font-size: 36px;
    font-weight: 300;
    color: #1a1a1a;
}

form h2 {
    text-align: center;
    margin: 0 0 15px;
    padding: 0;
    font-size: 20px;
    font-weight: 300;
    color: #1a1a1a;
}

form input[type="text"], form input[type="password"] {
    font-family: "Roboto", sans-serif;
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}

form input[type="checkbox"] {
    font-family: "Roboto", sans-serif;
    outline: 0;
    background: #f2f2f2;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}

form .text {
    color: #919191;
    font-size: 14px;
}

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

My text-align: center works perfectly on <h1>, but why doesn't it work for my <a> link? I don't get it. Can someone please help, or explain why? It is not as if something is really complex with this simple design.

Answer 1

您的文字很可能是居中的，但锚是内联元素，因此具有其内容的宽度。试试这个（添加：display：block）：

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

Answer 2

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

Answer 3

text-align:center适用于代码的内容。

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

a是一个内联元素，宽度只是标记中包含的内容，这就是它无法居中的原因。

您可以使用块元素

包装a

<div> <a></a> </div>

或者给它display:block

Answer 4

Can't text-align:center on css

你可以把它包装成div：

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

text-align：center无法处理<a> but does on </a> <h1> <a>

4 个答案: