Question

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

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

Answer 2

尝试以下内容。我们的想法是限制.inputdes 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>

Answer 3

您可以为字段周围的输入提供固定宽度，并为输入提供宽度：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/

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

3 个答案: