Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question centering a textarea element with css?

    Hi all, I know how to center text & images but none of these things work with the textarea element. Does anyone know a good (standards complient) method that would center a textarea with css. Thnx in advance.

    EDIT: using the margin: auto + block trick didn't work & setting left & right to 50% with position: absolute doesn't really center the element but shifts it slightly to the right of the center (on firefox at least, didn't test it with IE yet).
    Last edited by gilf; 02-18-2005 at 06:19 PM.

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Location
    Port Huron, MI, U.S.A.
    Posts
    280
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <textarea style="text-align:center"></..>
    for text inside the box;

    <center>textarea</center>
    for the box intself to it's container
    Last edited by Bobo; 02-18-2005 at 06:18 PM.
    Oh, was I supposed to put something here? ........

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah but isn't the <center> element deprecated? I am using XHTML 1.1 Strict so that would be an issue.

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Specify in CSS

    textarea.my_centered_box
    {
    margin: 0 auto;
    }

    the margin prop goes in this order: top, right, bottom, left, but "0 auto" is a shortcut for top 0px, right auto, bottom 0px, left auto. Since left and right are both auto, the browser divides it equally, resulting in a centered element, and a happy coder. (Except in IE, where the coder is still mad about other things that DIDN'T work)

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by gilf
    using the margin: auto + block trick didn't work & setting left & right to 50% with position: absolute doesn't really center the element but shifts it slightly to the right of the center (on firefox at least, didn't test it with IE yet).
    What Whizard said.

    If you want to use the 50% trick, remember that it won't be set to the center of the page, but the start of the element will be set to the center of the page. So you have to shift it back by half of the width of the element. So...
    Code:
    textarea {
     width: 300px;
     position: absolute;
     left: 50%;
     margin-left: -150px;
     }
    And that's how that works. Some browsers kinda freak out on this one, though. Use whatever you're comfortable with.

  • #6
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    K, thnx all. Gonna check if this is gonna work .


  •  

    Posting Permissions

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