bevanb bevanb - 1 year ago 86
Javascript Question

Centering textarea placeholder text in Safari

I want to center the placeholder text for my

s. The code below works fine in Chrome and IE, but is left-aligned in Safari:

::-webkit-input-placeholder {

:-moz-placeholder {

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

Answer Source

I made a simple solution that works on Safari 5+ and all other browser you can check it at:


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


  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;