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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    257
    Thanks
    47
    Thanked 0 Times in 0 Posts

    Centring a form field?

    Hello

    I am trying to centre the input (for email addresses) field here: Password recovery

    I am also attaching a screenshot. Compared to the text above and below, the input field seems to lean towards the left (unless
    the texts are out of synch!).

    In my HTML, I have:

    Code:
    <form name="Password" method="post" action="confirm.asp">
            <div class="logo_text1">
              <h3>Lost Password?</h3>
            </div>
    
            <div class="logo_text">
              <h3>Please enter a valid Email address</h3>
            </div>
            <input id="submitlink" type="text" name="Email" />
            
            <button type="submit">Request password</button> 
    
    </form>
    And CSS:

    Code:
    input#submitlink {
      background: transparent;
      //border: 0;
      width:80%;
      cursor:pointer;
      /*margin: 0 auto;*/
    margin-right: auto;
    margin-left: auto;
      padding: 10px 0 0 0;
      color: #E2EFF8;
      text-decoration: underline;
      font: normal 12px 'Droid Sans', arial, sans-serif;
      display: block;
    }
    Thank you!

    Blue1
    Attached Thumbnails Attached Thumbnails Centring a form field?-pleaseenteravalid.jpg  

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    we need a width to center things. And name is not used in the form tag, it's ID. I also changed your button to an input type submit.
    Added the body and the form(via #Password) styling and the stuff that's not indented.
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    input#submitlink {
    	background: transparent;
    	width:80%;
    	cursor:pointer;
    	padding: 3px 0;
    margin:	 10px 0;
    	color: #E2EFF8;
    	font: normal 12px 'Droid Sans', arial, sans-serif;
    	display: block;
    width: 250px;
    margin: 0 auto;
    }
    div, input{
    	margin: 0 auto;
    }
    #Password{
    width: 320px;
    text-align:center;
    	margin: 0 auto;
    }
    body{
    background-color: gray;  //SO I COULD SEE THE TEXT
    }
    </style>
    </head>
    
    <body>
    <form id="Password" method="post" action="confirm.asp">
            <div class="logo_text1">
              <h3>Lost Password?</h3>
            </div>
    
            <div class="logo_text">
              <h3>Please enter a valid Email address</h3>
            </div>
            <input id="submitlink" type="text" name="Email" />
    
            <input type="submit" value="Request password">
    
    </form>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    Blue1 (05-03-2014)

  • #3
    Regular Coder
    Join Date
    Feb 2014
    Posts
    257
    Thanks
    47
    Thanked 0 Times in 0 Posts
    You must have the eye of an eagle........

    How did you manage that!?

    Thank you. Please see attached - that's how it looks. I wasn't sure if I was being a little too fussy, but your code looks so much better.

    Centring a form field?-sunfighter.jpg

    Many thanks again - much appreciated.

    Blueie

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Glad to be of help. So glad it worked for you.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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