How to align (input[type="checkbox"]+Label) to center horizontally on the page?

Question

I am learning HTML ,CSS & JS, and I am stuck here.

I want to align the checkbox and label to the center of the page and no matter what I try, it's misaligned, can someone explain what am I doing wrong here.

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

        @import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');


        body{
            font-family: 'Righteous', cursive;
            /* font-family: 'Amatic SC', cursive; */
            font-size: 1.3em;
            color: white;
            background-color: black;
        }

        /* making the font style same */
        input,button{
            font-family: inherit;
        }
        
        /* styling the field set and aligning to center */
        fieldset{
            max-width: max-content;
            background-color: black;
            margin-left: auto;
            margin-right: auto;
        }


        /* night mode */

        /* to hide the defualt checkbox and align it to middle */
        .toggle{
            vertical-align: middle;
            opacity:0;
        }

        /* giving  night image for checkbox */
        .toggle + label{
            background:url(night.png) left center no-repeat;
            background-size: 1.5em;
            padding-left: 1.5em;
        }

        /* giving day image for checkbox */
        .toggle:checked + label{
            background:url(day.png) left center no-repeat;
            background-size: 1.5em;
        }

        
        /* to align the checkbox and label to center, kinda works? but this just sends it more towards left*/
        .aligner{
            position: relative;
            margin-left: 50vw;
            margin-right: 50vw;
        }
        
        /* night/day toggle ends */
    </style>
</head>

<body>
<form>
    <!-- to align the checkbox and label -->
    <div class="aligner">
        <input type="checkbox" id="toggle" class="toggle" onclick="darkMode();">
        <!-- added no breaking space becuase it was breaking -->
        <label for=toggle id="toglab">Night&nbsp;Mode&nbsp;On</label>
    </div>

    <!-- main form -->
    <fieldset id="fieldset">
        <legend>Sign In</legend>
        <!-- email -->
            <label for="email">Email:</label>
            <br>
            <input type="email" name="email" id="email">
            <br><br>
        <!--email  -->

        <!-- password -->
            <label for="password">Password:</label>
            <br>
            <input type="password" id="password">
            <br>
        <!-- password -->
        <!-- show password -->
            <br>
            <label for="checkbox" id="showpass">Show Password:</label>
            <input type="checkbox" id="checkbox" onClick=showPass();>
        <!-- show password -->
            <br><br>
          
            <!-- Submit -->
            <button type="submit">Submit</button>
    </fieldset>
</form>  

<!-- js starts -->
    <script>
        function showPass(){
            var x=document.getElementById("password");
            var y=document.getElementById("showpass");
            if(x.type=="password"){
                x.type="text";
                y.innerHTML="Hide Password";
            }
            else{
                x.type="password";
                y.innerHTML="Show password";
            }
        }

        function darkMode(){
            var a=document.getElementById("toglab");
            var b=document.getElementById("toggle");
            var body=document.body;
            var fieldset=document.getElementById("fieldset");
            if(b.checked==true){
                a.innerHTML="Day&nbsp;Mode&nbsp;On";
                body.style.backgroundColor="white";
                body.style.color="black";

                fieldset.style.backgroundColor="white"
            }
            else{
                a.innerHTML="Night&nbsp;Mode&nbsp;ON";
                body.style.backgroundColor="black";
                body.style.color="white";
                
                fieldset.style.backgroundColor="black"
            }
        }
    </script>

    <!-- js ends  -->
</body>
</html>

Sorry to paste the long code, but I hope I have provided everything possible. I have tried some of the previous questions methods, like display-inline, display-flexbox, etc but none of them seems to work.

Used the Div to align the Night Mode On text to center, also used nbsp; or else it was breaking.

Others have given methods of centering (though so far neither answers are completely correct in the general case), but just to outline what is happening: You have given aligner left and right margins of 50vw. The actual width of the aligner div is 0 - you can check this by going to your browser's dev tools inspect facility and look at the Computed values. Hence the text was breaking at the end of a word (and you then put a non breaking space in).So, the aligner is set to start (and end) at 50vw. It will overflow by one whole word (or the lot given the non breaking space). — A Haworth, May 14 '22 at 06:32

score 2 · Accepted Answer · answered May 14 '22 at 06:11

2

You can use display:flex; and justify-content:center; to position it in center

   .aligner{   
        position: relative;
        display: flex;
        margin-right: 6vw;
        justify-content: center;
    }

answered May 14 '22 at 06:11

Sumit Sharma

1,192
1
4
18

Thanks, this worked and the margin-right:6w; worked like a charm. – Mayuresh Rawal May 14 '22 at 06:16
Could you explain how the 6vw was arrived at because if the text is changed, say to Night Mode Off, it does not align things properly. This doesn't seem to be a general solution. – A Haworth May 14 '22 at 06:29
display: flex; justify-content: center; Use this in the aligner and the Night Mode On is a bit more aligned to the right of the fieldset. added margin-right:6w; and now its centered, but can be pulled more towards left. But if I add display: flex; justify-content: center; to the body and comment out the aligner div, I don't need margin-right:6w; – Mayuresh Rawal May 14 '22 at 06:39

score 1 · Answer 2 · answered May 14 '22 at 06:08

I edit some of your css. flex it then center it. Let me know if this is what you mean??

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

        @import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');


        body{
            font-family: 'Righteous', cursive;
            /* font-family: 'Amatic SC', cursive; */
            font-size: 1.3em;
            color: white;
            background-color: black;
        }

        /* making the font style same */
        input,button{
            font-family: inherit;
        }
        
        /* styling the field set and aligning to center */
        fieldset{
            max-width: max-content;
            background-color: black;
            margin-left: auto;
            margin-right: auto;
        }


        /* night mode */

        /* to hide the defualt checkbox and align it to middle */
        .toggle{
            vertical-align: middle;
            opacity:0;
           
        }

        /* giving  night image for checkbox */
        .toggle + label{
            background:url(night.png)  center no-repeat;
            background-size: 1.5em;
            
        }

        /* giving day image for checkbox */
        .toggle:checked + label{
            background:url(day.png)  center no-repeat;
            background-size: 1.5em;
        }

        /* to align the checkbox and label to center, kinda works? but this just sends it more towards left*/
        .aligner{
            position: relative;
            display:flex;
            justify-content:center;

        }
        
        /* night/day toggle ends */
    </style>
</head>

<body>
<form>
    <!-- to align the checkbox and label -->
    <div class="aligner">
        <input type="checkbox" id="toggle" class="toggle" onclick="darkMode();">
        <!-- added no breaking space becuase it was breaking -->
        <label for=toggle id="toglab">Night&nbsp;Mode&nbsp;On</label>
    </div>

    <!-- main form -->
    <fieldset id="fieldset">
        <legend>Sign In</legend>
        <!-- email -->
            <label for="email">Email:</label>
            <br>
            <input type="email" name="email" id="email">
            <br><br>
        <!--email  -->

        <!-- password -->
            <label for="password">Password:</label>
            <br>
            <input type="password" id="password">
            <br>
        <!-- password -->
        <!-- show password -->
            <br>
            <label for="checkbox" id="showpass">Show Password:</label>
            <input type="checkbox" id="checkbox" onClick=showPass();>
        <!-- show password -->
            <br><br>
          
            <!-- Submit -->
            <button type="submit">Submit</button>
    </fieldset>
</form>  

<!-- js starts -->
    <script>
        function showPass(){
            var x=document.getElementById("password");
            var y=document.getElementById("showpass");
            if(x.type=="password"){
                x.type="text";
                y.innerHTML="Hide Password";
            }
            else{
                x.type="password";
                y.innerHTML="Show password";
            }
        }

        function darkMode(){
            var a=document.getElementById("toglab");
            var b=document.getElementById("toggle");
            var body=document.body;
            var fieldset=document.getElementById("fieldset");
            if(b.checked==true){
                a.innerHTML="Day&nbsp;Mode&nbsp;On";
                body.style.backgroundColor="white";
                body.style.color="black";

                fieldset.style.backgroundColor="white"
            }
            else{
                a.innerHTML="Night&nbsp;Mode&nbsp;ON";
                body.style.backgroundColor="black";
                body.style.color="white";
                
                fieldset.style.backgroundColor="black"
            }
        }
    </script>

    <!-- js ends  -->
</body>
</html>

Thanks it works + margin-right-6w; is needed to align it a bit. — Mayuresh Rawal, May 14 '22 at 06:17

How to align (input[type="checkbox"]+Label) to center horizontally on the page?

2 Answers2