I writing a web page and wish to have a centred textarea entry field. My textarea CSS is:

Code:
textarea
{font-size: 15pt;
font-family: Arial; 
margin-left:auto;
margin-right:auto;
display:block;} 

<textarea rows="3" cols="60">text....</textarea>
This is not centring on my iPhone but it is on my desktop IE and Firefox. The iPhone displays the textarea hard to the left.

I have experimented and put a pixel width in say width:500px in the Textarea style and this centres it perfectly on the iPhone and desktop. But there is a problem: The cols dimension is completely ignored, I lose my control over the number of columns in the text area as no matter what size I put in for cols the pixel dimension takes precedence.

Code:
h1 {text-align:center;} works correctly for <h1>HEADER1</h1> and 

.center {
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width:400px;}

centres correctly too: <div class="center">Test Center</div>
Images centre correctly using the stye:

Code:
img {
margin-left:auto;
margin-right:auto;
display:block;}
Any help would be gratefully received.

Thanks