Centering textarea placeholder text in Safari

Question

I want to center the placeholder text for my textareas. The code below works fine in Chrome and IE, but is left-aligned in Safari:

::-webkit-input-placeholder {
text-align:center;
}

:-moz-placeholder {
text-align:center;
}

How can I get it centered in Safari (preferably only using CSS)?

Can you try this http://stackoverflow.com/questions/8558603/ios-5-0-safari-not-vertically-centering-placeholder-in-text-box — kiranvj, Jul 13 '12 at 05:52
try this http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding-problem — Prashobh, Jul 13 '12 at 06:45
It appears to be working in Safari 6.0, 5.1, and Firefox 11 (both Windows and Mac) http://jsfiddle.net/Gs5gU/ — Andrew M, Jul 25 '12 at 03:08
Ok, I don't have 5.0 to test with. Then it would seem like it is a bug and there's not really much anyone can do... It's already been fixed in future versions, and it is a very specific version affected. — Andrew M, Jul 28 '12 at 18:50

Wallace Sidhrée · Answer 1 · 2013-01-22T16:03:51.820

This problem is specific to Safari 5.0 and Safari 5.1 + Win7 - as far as tests done by others are concerned.

Andrew M said it's working on Safari 6.0, 5.1 and Firefox 11 - both in Windows (no version mentioned, perhaps not Win 7) - and Mac.

I just tested the code below on Safari 6.0.2, Chrome 24.0.1, Firefox 18.0.1, and can confirm it's working. Doesn't work on Opera 12.10. All tested on OSX Lion. http://jsfiddle.net/dreamyguy/ZzdPH/

HTML

<input type="text" placeholder="Lorem ipsum" />

CSS

input { width: 200px; }
::-webkit-input-placeholder {
    text-align:center;
}
:-moz-placeholder {
    text-align:center;
}
:-ms-input-placeholder {
    text-align:center;
}

Maybe you should edit this question and make it specific to Safari version 5.0 and below, since it's a Safari specific question because the issue has been fixed in later versions.

This reference may be useful too: http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

Hm.. According to the blog post I mentioned at the bottom of my post, the combination `Safari 5.1 + Win7` does not support `text-align` either. I haven't tested it on that combination. — Wallace Sidhrée, Jan 22 '13 at 15:53
I can also confirm this doesn't work on `Safari 5.1 on Win7`. This [MacWorld article](http://www.macworld.com/article/1167904/safari_6_available_for_mountain_lion_and_lion_but_not_windows.html) suggests we may never see Safari 6 on Windows, so it looks like Safari 6 behavior is the real thing to focus on. — Spencer Williams, Oct 08 '13 at 22:29

score 0 · Answer 2 · answered May 30 '14 at 09:29

0

input[type=textarea] 
{
  line-height: 1;
}

answered May 30 '14 at 09:29

Rathore

1,926
3
19
29

score 0 · Answer 3 · answered Apr 07 '16 at 11:58

I came across this issue where in I had to center align the placeholder but text-align: center didn't work on SAFARI and after many trials I came across a solution, which will not guarantee the exact center but can suffice the requirement.

Solution => Use text-indent

input{
    height:40px;
   width:190px;
   text-indent:60px;
}

score 0 · Answer 4 · answered Jul 23 '16 at 16:47

If you want to put a placeholder into the center of a textarea you need to set the textareas height and set the line-height to the placeholders height as well as text-align center. Here are all of the available methods so far.

textarea {
    min-height: 60px;
}

textarea::-webkit-input-placeholder,  {
   text-align: center;
   line-height: 60px; // Input Height
}

textarea:-moz-placeholder { /* Firefox 18- */
   text-align: center;
   line-height: 60px; // Input Height
}

textarea::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;
   line-height: 60px; // Input Height
}

textarea:-ms-input-placeholder {  
   text-align: center;
   line-height: 60px; // Input Height
}

score -1 · Accepted Answer · answered Feb 20 '13 at 17:31

I made a simple solution that works on Safari 5+ and all other browser you can check it at: http://jsfiddle.net/joaorito/RqUJL

HTML

<div class="center_area">
<ul class="V_align">
    <li class="V_cell">
        <div class="V_element">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
    </li>
</ul></div>

CSS

.center_area
  {
  font-size: 16px;
  width: 300px;
  height: 300px;
  border: 5px solid black;
  } 

.center_area ul
  {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: red;
  height: 100%;
  width: 100%;
  }

.center_area ul li
  {
  color: #FFF;
  font-size: 1.500em;
  line-height: 28px;
  }

.center_area  ul li div
  {
  background-color: green;
  padding: 10px;
  text-align: center;
  }

.center_area .V_align
  {
  display: table;
  overflow: hidden;
  }

.center_area .V_align .V_cell
  {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  }

.center_area .V_align .V_cell .V_element
  {
  display: block;
  }

Centering textarea placeholder text in Safari

5 Answers5

Linked