文本与输入字段对齐，左对齐

I have input fields which are supposed to be shown centered and then the texts to these input fields are supposed to be aligned left and "start" with the input fields.

我有输入字段应该显示为居中然后输入字段的文本应该向左对齐然后输入字段“开始”。

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>

However, no matter what I do, every time when I use text-align: left; it automatically aligns the inputfields left as well. I tried to group the text areas together with class names but it doesn't work. Does anyone know the answer?

然而，无论我做什么，每次当我使用文本对齐:左;它也会自动对齐留置区。我试图将文本区域与类名组合在一起，但它不起作用。有人知道答案吗?

Thanks !

谢谢!

3 个解决方案

#1

Try something like the following. The idea is that we limit the width of the .inputdes div, then put the text in a nested div that has text-align: left. That way we can have the inputs centered but the text aligned left within its div.

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

#2

It's recommended to not use align="center", because align attribute is deprecated. You should use the CSS text-align property on the container.

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

The rule display: table; will make the element to "shrink-to-fit" the content inside, without need to specify the width value.

显示规则:表;将使元素“收缩到适合”内部的内容，而不需要指定宽度值。

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

#3

You could give the input around the fields a fixed width and give the inputs a width: 100% to use text-align: left.

您可以在字段周围输入一个固定的宽度，并给输入一个宽度:100%使用文本对齐:左边。

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

Here's the updated Fiddle: https://jsfiddle.net/tfbatp5v/11/

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

#1

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

#2