当对齐形式中心时，向左对齐跨度字段

Question

我遇到了一个问题，我在容器上使用text-align来将其中的所有内容集中起来，但是我想将我的<span>元素对齐到那个居中容器中的左边。我尝试过在css中隔离span元素并使用text-align: left;，但没有取得任何成功。我觉得这是一个简单的解决办法，目前我正在忘记，但希望它可以轻易解决。

HTML：

<div class="grid">
    <div class="col-1-1" id="bar-registration-container">
        <h1>Register</h1>
        <div id="form-fields">
            <form>
                <label class="form-label" id="email">
                    <span>Email</span>
                    <br />
                    <input id="email" type="email" name="email" />
                </label>
                <br />
                <label class="form-label" id="password">
                    <span>Password</span>
                    <br />
                    <input id="password" type="password" name="password" />
                </label>
                <br />
                <label>
                    <input class="form-label" id="submit" type="submit" value="Register" />
                </label>
            </form>
        </div>
    </div>
</div>

CSS：

#bar-registration-container h1{
    text-align: center;
}

#form-fields {
    text-align: center;
    background-color: #fff;
    margin: 0 auto;
    padding: 20px;
}


#form-fields input[type=email] {
    font-size: 27px;
    margin-bottom: 20px;
}

#form-fields input[type=password] {
    font-size: 27px;
    margin-bottom: 10px;
}

.form-label span {
    color: #000;
    margin-right: 10px;
}

#submit {
    margin-top: 20px;
    width: 300px;
    height: 30px;
    background-color: #000;
    color: #fff;
    font-size: 15px;
    border: none;
}

Answer 1

我相信这个片段能实现你想要的。我只是给form-fields div设置了一个设置的宽度，并在这些span元素中添加了一些样式，以使它们能够扩展该div的全部宽度，但要左对齐。

​

#bar-registration-container h1{
    text-align: center;
}

#form-fields {
    width: 340px;
    text-align: center;
    background-color: #fff;
    margin: 0 auto;
    padding: 20px;
}


#form-fields input[type=email] {
    font-size: 27px;
    margin-bottom: 20px;
}

#form-fields input[type=password] {
    font-size: 27px;
    margin-bottom: 10px;
}

.form-label span {
    display: inline-block;
    text-align: left;
    color: #000;
    width: 100%;
    margin-left: 5px;
}

#submit {
    margin-top: 20px;
    width: 300px;
    height: 30px;
    background-color: #000;
    color: #fff;
    font-size: 15px;
    border: none;
}

<div class="grid">
    <div class="col-1-1" id="bar-registration-container">
        <h1>Register</h1>
        <div id="form-fields">
            <form>
                <label class="form-label" id="email">
                    <span>Email</span>
                    <br />
                    <input id="email" type="email" name="email" />
                </label>
                <br />
                <label class="form-label" id="password">
                    <span>Password</span>
                    <br />
                    <input id="password" type="password" name="password" />
                </label>
                <br />
                <label>
                    <input class="form-label" id="submit" type="submit" value="Register" />
                </label>
            </form>
        </div>
    </div>
</div>

​

Answer 2

为了左对齐您的<span>，您需要左对齐它们，在版本中，您必须使用display:block。你实际上是在正确的轨道上你刚刚错过了display:block。使用display:block将使您的<span>充当块元素，如<div>或<p>，然后它将更好地尊重对齐属性。

span{
    text-align:left;
    display:block;
    margin-left:50px;// adjust yourself. Was just playing around with it.
}