How to center text within a text area?

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!

"_Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and **the shortest code necessary to reproduce it in the question itself**. Questions without a clear problem statement are not useful to other readers. See: How to create a [mcve]._" — takendarkk, Mar 28 '18 at 21:16
It would be awesome if you can share the code as part of your answer, instead of in an image. — sbolel, Mar 28 '18 at 21:16
Have you tried something? if yes, then please provide your code here too, otherwise your question is useless. — Ilyas karim, Mar 28 '18 at 21:20
I think you have already centered your text in the demo. Right? — Ilyas karim, Mar 28 '18 at 21:21
@llyas karim The placeholder is centered in my demo, what I'm trying to do is vertically align the actual text that you type in the box with the button next to it. — justinoreilly23, Mar 28 '18 at 21:24
@csmckelvey I appreciate the input, and have since updated my OP. Do you have a viable solution to my problem? — justinoreilly23, Mar 28 '18 at 21:32

score 0 · Accepted Answer · answered Mar 28 '18 at 21:31

0

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 :)

answered Mar 28 '18 at 21:31

Fan Jups

14
4

Thank you so much for the feedback, it fixed my problem! I was originally following someone else's guide when I was using the ".username::placeholder" pseudo selector. Thanks again! :-) – justinoreilly23 Mar 28 '18 at 21:37

How to center text within a text area?

1 Answers1