Vertical-Align Text Within a Textarea

Middle (vertically) align text inside a textarea

Back in the days when i was asking this, i tried achieving this with textarea which is really not possible without scripting. The answer was adding HTML5's contenteditable="true" on a table cell with style="vertical-align: middle". If one's project allows modern HTML, this is a rather simple and effective solution.

If instead of adding <table> and <tr> and <td> to your markup, you would like something regular like a <div>, you would still need two of them:

<div style="display: table">
  <div 
    style="display: table-cell; vertical-align: middle"
    contenteditable="true">
    I am vertically aligned
  </div>
</div>

How do I vertically center the cursor in this text area?

var textInput = document.getElementById('textInput');
var textDuplicate = document.getElementById('textDuplicate');

textInput.addEventListener('keyup', function(e) {
 textDuplicate.innerHTML = textInput.value;
});

#img-wrapper {
 width: 400px;
 height: 350px;
 background-image: url('https://images.unsplash.com/photo-1553095066-5014bc7b7f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8d2FsbCUyMGJhY2tncm91bmR8ZW58MHx8MHx8&w=1000&q=80');
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 display: flex;
 align-items: center;
 justify-content: center;
}

#textDuplicate { 
color: #fff; 
text-align: center;
padding: 10px;
}

<textarea id="textInput"></textarea>

<div id="img-wrapper">
<span id="textDuplicate"></span>
</div>

Related Topics