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

在对齐表单中心时将跨度字段对齐到左侧

2 个答案: