Orkun Oz Orkun Oz - 2 months ago 7
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

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>