iOS 5.0 Safari Not Vertically Centering Placeholder in Text Box

iOS 5.0 Safari not vertically centering placeholder in text box

Setting line-height: 1; seems to fix this.

Placeholder text is not vertically centered in Safari

-Safari Solution-

I got stuck on this issue for a long time despite using

input::-webkit-input-placeholder {
line-height:normal!important;
}

It turns out that having a line-height in the immediate input element was breaking my input::webkit-input-placeholder line-height.

Solution extended:

I removed the line-height in my input style and it fixed my issue.

Centering textarea placeholder text in Safari

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;
  }

placeholder always align left in safari

Try this it's working

CODE:

input { 
   text-align:center;
}

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

:-moz-placeholder { /* Firefox 18- */
   text-align:center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align:center;  
}

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

will work in safari 6 as placeholder text-align property not working in safari 5.1 or older version

see support table here http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

safari 5.1.7 can't align input placeholder text center

maybe so?

jQuery(function () {
    $('[placeholder]').focus(function () {        var input = $(this);        if (input.val() == input.attr('placeholder')) {            if (this.originalType) {                this.type = this.originalType;                delete this.originalType;            }            input.val('');            input.removeClass('placeholder');        }    }).blur(function () {        var input = $(this);        if (input.val() == '') {            if (this.type == 'text') {                this.originalType = this.type;                this.type = 'text';            }            input.addClass('placeholder');            input.val(input.attr('placeholder'));        }    }).blur();    });

*{    padding: 0;    margin: 0;}body{    margin: 30px;}input { box-sizing: border-box; width: 100%; padding: 1em;  text-align: center;}
::i-block-chroms, input[placeholder]::-webkit-input-placeholder {       text-align:center;}::-webkit-input-placeholder {       text-align:center;}input::-webkit-input-placeholder {       text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><input type="text" name="Surname" placeholder="Surname" id="surname">

Mobile Safari (iPhone) CSS vertical centering/line-height CSS issues

This article has some great information on many different options for centering content when you don't know anything about the widths and heights:

http://css-tricks.com/centering-in-the-unknown/

It builds on from user1002464's answer quite well.

---

Related Topics