Text align left in a centered div with input fields - html

Question

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 !

Answer 1

It's recommended to not use align="center", because align attribute is deprecated. You should use the CSS text-align property on the container.
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>

Answer 2

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

You could give the input around the fields a fixed width and give the inputs a width: 100% to use 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>
Here's the updated Fiddle:
https://jsfiddle.net/tfbatp5v/11/