Orkun Oz Orkun Oz - 1 year ago 102
CSS Question

Start position in text box (html/css)

I'm trying to create a text box, so the user can enter a chapter of a book into that.

It's starting to type from the middle of a box. how can I fix it?

enter image description here



.TextBox {
width: 500px;
height: 50px;
background: #cccccc;
margin-left: auto;
margin-right: auto;
}
.TextBox > h1 {
font-family: 'Consolas';
text-align: center;
padding-top: 10px;
}
#textbox {
width: 500px;
height: 200px;
}

<div class="container">
<div class="TextBox">
<h1> Enter text here </h1>
<form>
<input type="text" id="textbox">
</form>

</div>
</div>




Answer Source

Use <textarea> and align it, if I undestood you correctly, to the center. With the col attribute you can define the width of the textarea and with the row you can define the height of the textarea

.TextBox {
  width: 500px;
  height: 50px;
  background: #cccccc;
  margin-left: auto;
  margin-right: auto;
}
.TextBox > h1 {
  font-family: 'Consolas';
  text-align: center;
  padding-top: 10px;
}
#textbox {
  width: 500px;
  height: 200px;
  text-align:center;
}
<div class="container">
  <div class="TextBox">
    <h1> Enter text here </h1>
    <form>
      <textarea cols="80" rows="10" id="textbox" type="text" name="textbox">Lorem ipsum
</textarea>
    </form>

  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download