文本左对齐 div 与输入字段

Question

我有应该居中显示的输入字段，然后这些输入字段的文本应该左对齐并且 "start" 与输入字段对齐。

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

谢谢！

Answer 1

尝试如下操作。这个想法是我们限制 .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 2

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

规则display: table;将使元素成为"shrink-to-fit"里面的内容，而不需要指定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 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>

这是更新后的 Fiddle： https://jsfiddle.net/tfbatp5v/11/

文本左对齐 div 与输入字段

Text align left in a centered div with input fields

html

css

text-align

center