www.webdeveloper.com
Results 1 to 4 of 4

Thread: Textarea not centering on iPhone Safari

  1. #1
    Join Date
    Dec 2010
    Posts
    12

    Textarea not centering on iPhone Safari

    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

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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.

  3. #3
    Join Date
    Dec 2010
    Posts
    12

    Thank you for your help

    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

  4. #4
    Join Date
    Jul 2012
    Posts
    3
    Try
    Code:
    .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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles