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

【问题标题】：Text align left in a centered div with input fields文本在带有输入字段的居中 div 中左对齐
【发布时间】：2015-10-02 02:47:41
【问题描述】：

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

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; 时，它都会自动将输入字段左对齐。我试图将文本区域与类名组合在一起，但它不起作用。有人知道答案吗？

谢谢！

【问题讨论】：

标签： html css center text-align

【解决方案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>

【讨论】：

【解决方案2】：

尝试以下方法。想法是我们限制@987654321@ div 的宽度，然后将文本放入具有text-align: left 的嵌套div 中。这样我们可以使输入居中，但文本在其 div 内左对齐。

.inputdes{
    color: #9b9b9a;
    font-size:20px;
    height: 200px;
    width: 200px;
}
.inputdes > div > div {
    text-align: left;
    margin: 0 15px;
}
.blue{
    height: 70px;
}

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

【讨论】：

【解决方案3】：

您可以为字段周围的输入提供固定宽度，并为输入提供 width: 100% 以使用 text-align: left。

.inputdes{
  
  color: #9b9b9a;
  font-size:20px;
  height: 200px;
  width: 200px;
  text-align: left;
}

input { 
    width: 100% 
}


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

这是更新后的小提琴： https://jsfiddle.net/tfbatp5v/11/

【讨论】：