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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Sep 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having trouble centralizing items.

    I've made a very simple login page using html and css. Below is the code
    html
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="mainform">
            <form action="" class="login">
               <label for="uname">Username:</label>
                <input type="text" name="" id="uname" class="un" placeholder="Enter Username">
                <br>
                <label for="pwd">Password:</label>
                <input type="text" name="pwd" id="" class="un" placeholder="Enter Password">
                <br>
                <input type="submit" value="Sign In" class="btn">
            </form>        
        </div>
    </body>
    </html>
    css
    Code:
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        background-image: url(pic1.jpg);
    
    }
    
    .mainform {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
    }
    
    input {
        color: olive;
        font-size: 20pt;
        margin-bottom: 14px;
        padding: 2px auto 2px auto;
    }
    
    label {
        color: coral;
        font-family: sans-serif;
        font-size: 21pt;
    }
    
    .un {
        width: 100%;
    }
    
    .btn {
        width: 180px;
        height: 55px;
        padding: 2px 5px;
        border: 3px solid white;
        background-color: rgba(255, 255, 255, 0);
        color: white;
        border-radius: 6px;
        transition: background-color 1000ms, color 1000ms;
    }
    
    .btn:hover {
        background-color: rgba(255, 255, 255, 1);
        color: #222;
        cursor: pointer;
    }
    I tried using flexbox to align every item in the mainform div to center but the
    Code:
    <input type="submit" value="Sign In" class="btn">
    is not aligning properly. How do I add the alignment to .btn?

    Also there are line breaks between label and input box...how do I wrap labels with input?
    Attached Thumbnails Attached Thumbnails -post-702477-153796093781-png  

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,786
    Thanks
    35
    Thanked 1,044 Times in 1,040 Posts
    Try adding this to your CSS
    Code:
    form {
    	text-align:center;
    }
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New to the CF scene
    Join Date
    Sep 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It does not work..

  4. #4
    New Coder
    Join Date
    Mar 2018
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    . btn {
    margin-left:auto;
    margin-right:auto;
    }

  5. #5
    New to the CF scene
    Join Date
    Sep 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It also doesn't work..

  6. #6
    New Coder
    Join Date
    Mar 2018
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Have u tried replacing mainform in a div like this;?

    Code:
    <div style="width:100%; margin:0 auto;">
            centered content
    </div>

  7. #7
    New to the CF scene
    Join Date
    Sep 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are u talking about like this...
    Code:
    <div style="width:100%; margin:0 auto;">
    <input type="submit" value="Sign In" class="btn">
    </div>
    Did that..but no effect.

  8. #8
    New Coder
    Join Date
    Mar 2018
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see..
    Try this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
         <div align="center">
            <form action="" class="login">
               <label for="uname">Username:</label>
                <input type="text" name="" id="uname" class="un" placeholder="Enter Username">
                <br>
                <label for="pwd">Password:</label>
                <input type="text" name="pwd" id="" class="un" placeholder="Enter Password">
                <br>
                 <input type="submit" value="Sign In" class="btn">
            </form>        
        </div>
    </body>
    </html>
    Edit: IGNORE ABOVE

    Code:
    .mainform {
        display: flex;
        height: 100vh;
        margin: 0 auto;
        width: 100%;
    }
    Last edited by LARP; Sep 27th, 2018 at 03:53 PM.

  9. #9
    New to the CF scene
    Join Date
    Sep 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's just aligning the text of the button and not the actual button...I want the button to be centralized

  10. #10
    New Coder
    Join Date
    Mar 2018
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Im not that good with css, have u tried playing with these? in btn:

    Code:
    padding: 2px 5px;
    or maybe this:

    Code:
    .btn {
        width: 180px;
        margin: 0 auto;
        height: 55px;
        padding: 2px 5px;
        border: 3px solid white;
        background-color: rgba(255, 255, 255, 0);
        color: white;
        border-radius: 6px;
        transition: background-color 1000ms, color 1000ms;
    }

  11. #11
    New to the CF scene
    Join Date
    Sep 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes..but not getting the desired result

  12. #12
    New Coder
    Join Date
    Aug 2017
    Posts
    16
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Just try using the <center></center> tags around the thing you want to be centered, it may not be the most elegant but most time it works.

  13. #13
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,786
    Thanks
    35
    Thanked 1,044 Times in 1,040 Posts
    @Fin If you have been following posts on this forum you would know that
    HTML <center> Tag. Not Supported in HTML5.

    Obsolete
    This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Avoid using it.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  14. #14
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,786
    Thanks
    35
    Thanked 1,044 Times in 1,040 Posts
    @don_b,
    Let me apologize for not getting back to you sooner. I was moving and that took up all of my time.

    Since you never tell us what your doing we don't know what is not working for you nor what you want. I am guessing that the image in post#1 is what you want and will work with that.

    You want a centered form in a body tag. Not the best. They're a number of free login modals on the web that can be used with out all of this head ache. BUT:

    this uses what post#1 image shows - problem is what we use for the height of the users screen. A model would fix that or JS to find out what that dimension is.

    This works on my screen, but if it doesn't work for you or 500 billion other people add the JS to find the height and change or add that to the mainform rule.

    Please notice the mainform is an ID.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= device-width, inital-scale=1">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
      background: gray;
      font-size: 80%;
      padding: 20px;
    }
    #mainform {
    	height:700px;
    	width:100%;
    	margin:0 auto;
    	padding:20px;
    	display:flex;
    	justify-content:center;
    	align-items:center;
    	resize:both;
    	overflow:auto;
    }
    form {
    	background:gray;
    	color:white;
    	width:28vw;
    	padding:20px;
    	resize:both;
    	overflow:auto;
    }
    input {
        color: olive;
        font-size: 20pt;
        margin-bottom: 14px;
        padding: 2px auto 2px auto;
    }
    label {
        color: coral;
        font-family: sans-serif;
        font-size: 21pt;
    }
    .btn {
        width: 180px;
        height: 55px;
        padding: 2px 5px;
        border: 3px solid white;
        background-color: rgba(255, 255, 255, 0);
        color: white;
        border-radius: 6px;
        transition: background-color 1000ms, color 1000ms;
    }
    .btn:hover {
        background-color: rgba(255, 255, 255, 1);
        color: #222;
        cursor: pointer;
    }
    </style>
    </head>
    
    <body>
    <div id="mainform">
    	<form action="" class="login">
    		<label for="uname">Username:</label> <input type="text" name="uname" id="uname" class="un" placeholder="Enter Username"><br>
    		<label for="pwd">Password:&nbsp;</label> <input type="text" name="pwd" id="pwd" class="un" placeholder="Enter Password"> <br>
    		<input type="submit" value="Sign In" class="btn">
    	</form>        
    </div>
    
    <script>
    var temph = screen.height;
    var x = document.getElementById('mainform')
    x.setAttribute("height",temph);
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

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
  •