html - 文本在带有输入字段的居中 div 中左对齐

Question

我有一些应该居中显示的输入字段，然后这些输入字段的文本应该左对齐并从输入字段“开始”。

http://jsfiddle.net/tfbatp5v/2/

.inputdes {
    color: #9b9b9a;
    font-size:20px;
    height: 200px;
}
.blue {
    height: 70px;
}

<div align="center" id="parent">
    <div class="welcome">Welcome</div>
    <div class="inputdes">
        <div class="blue">text1<br><input id="inputfield1" /></div>
        <div class="blue">text2<br><input id="inputfield2" /></div>
        <div class="blue">text3<br><input id="inputfield3" /></div>
    </div>
</div>

但是，无论我做什么，每次当我使用 text-align: left; 时，它也会自动将输入字段左对齐。我试图将文本区域与类名组合在一起，但它不起作用。有人知道答案吗？

谢谢!

Answer 1

建议不使用align="center"，因为align 属性已弃用。您应该在容器上使用 CSS text-align 属性。

规则 display: table; 将使元素“收缩以适合”里面的内容，而不需要指定 width 值。

#parent {
    display: table;
    margin: 0 auto;
}
.welcome {
    text-align: center;
}
.inputdes {
    color: #9b9b9a;
    font-size: 20px;
    height: 200px;
}
.blue {
    height: 70px;
}

<div id="parent">
    <div class="welcome">Welcome</div>
    <div class="inputdes">
        <div class="blue">text1<br><input id="inputfield1" /></div>
        <div class="blue">text2<br><input id="inputfield2" /></div>
        <div class="blue">text3<br><input id="inputfield3" /></div>
    </div>
</div>