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/
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.
Related Topics
Update Progressbar in Each Loop
Greek and Text-Transform:Uppercase
React Animation for Moving an Element from One Parent to Another
How Detect Which Child Element Is Visible After Scrolling the Parent Div
How to Let a Div Stick to Cursor
Why Do Arabic Characters Behave as Separate Characters When Styling Single Arabic Character
Scroll to Bottom in Chat Box in Angularjs
Document.Createelement('Div') with a Class
How to Make Content Load When the User Scrolls Down to It
Making an Element Visible by Hovering Another Element (Without :Hover-Property)
Jquery .Css() Function Not Returning Expected Values
Jquery Word for Word Fade in Effect
Disabling iOS Elastic Body Scroll & Keep Native Scrolling Working
Saving Dropdown Menu Selection in a Cookie
Detect Browser Graphics Performance