Textarea not centering on iPhone Safari

[PeterVincent]

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

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.

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:

img {
margin-left:auto;
margin-right:auto;
display:block;}

Any help would be gratefully received.

Thanks

[holyhttp]

Yes, when you specify CSS dimensions (width, height) on a form elements, those values take precedence.
When you specify display:block;, you are literally telling the element to fill the width of its parent container.
margin-left:auto, margin-right:auto will only work after the browser subtracts the width of the element from the width of its parent container. Then the remainder is split between the left and right margins.

So you need to tell the web browser how much width that text are should be. It can be in pixels or percentage.

[PeterVincent]

Hello holyhttp,

Thank you for your help.

I am going to try this with tables. I may have to come back to you again.

Many thanks again,

PeterVincent

[WillBontrager]

Try

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

That should center the div on any screen more than 400 pixels wide (the width of the div)

The
text-align:center;
will also center the content within the div. Remove
text-align:center;
if that's not what you want.

Will