Geek Answers Handbook

Text is centered left with input fields

I have input fields that should be displayed in the center, and then the texts on these input fields should be left aligned 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>
Run codeHide result

However, no matter what I do, every time I use it text-align: left;, it also automatically aligns the input fields. I tried to group text areas together with class names, but this will not work. Does anyone know the answer?

Thank!

+4
source share
3 answers

: , div .inputdes, div, text-align: left. , , 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>
Hide result
+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>
Hide result
+2

: 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>
Hide result

Fiddle: https://jsfiddle.net/tfbatp5v/11/

+1

More articles:


All Articles