How to center text within a text area? - css

Question

.username::placeholder {
padding-top: 14px;
text-align: center;
vertical-align: middle;
color: $grey-blue;
overflow: hidden;
}
.username {
resize: none;
width: 250px;
height: 46px;
text-align: center;
vertical-align: middle;
font-size: 16px;
font-family: "SansSerif", sans-serif;
display: inline-block;
border: 2px solid $blue;
}
.submit
{
vertical-align : middle;
background-color : $blue;
color : $white;
border : 2px solid $blue;
text-align : center;
padding : 16px 32px;
text-decoration : none;
display : inline-block;
font-size : 16px;
margin : 4px 2px;
cursor : pointer;
}
<form class="center">
<textarea minlength="2" maxlength="24" title="Username" placeholder="Username" class="username"></textarea >
<button type="submit" class="submit">Submit</button>
</form>
I would like to vertically center some text in a text-field, I was able to get the placeholder text centered, but not the actual text that's being typed.
What I'm hoping to accomplish by reaching out, is to have the user's text be aligned with the placeholder text, and the "submit" button next to it.
If you run the code snippet above, and try to put text in the field, you'll see what I mean.
One solution I've tried is to wrap the in a div, didn't work.
Here is my HTML:
http://secure.serverbox.net/sharex/201803/2018-03-28_15-07-02.png
Here is my styling:
http://secure.serverbox.net/sharex/201803/2018-03-28_15-08-19.png
Here is what the problem looks like:
With Placeholder: http://secure.serverbox.net/sharex/201803/2018-03-28_15-09-25.png
VS
With Text: http://secure.serverbox.net/sharex/201803/2018-03-28_15-11-52.png
Notice how the placeholder text is vertically aligned differently than the user's input.
Thanks in advance!

Answer 1

It looks like the actual text that's being typed is already centered. Maybe you are talking about vertical align ? You added padding-top to the placeholder, why not the same thing for .username ? I suggest you to delete .username::placeholder and only work with .username (Don't forget to add padding top this time). I hope it's helpful :)