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


i have input fields supposed shown centered , texts these input fields supposed aligned left , "start" 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 do, every time when use text-align: left; automatically aligns inputfields left well. tried group text areas class names doesn't work. know answer?

thanks !

try following. idea limit width of .inputdes div, put text in nested div has text-align: left. way can have inputs centered text aligned left within 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>    


Comments

Popular posts from this blog

searchKeyword not working in AngularJS filter -

sequelize.js - Sequelize: sort by enum cases -

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -