Align checkbox with text in center-CodePudding

Been trying to align these textboxes with the text in the center but I just can't get it to work I used justify-content: center; but it just doesn't align the checkbox and text underneath each other correctly.

#hyper {
    color: #01539C;
    font-family: BurbankSmallBold;
    text-decoration: none;
}
#terms, #agree  {
   font-family: ArialRegular;
   font-size: 10pt;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
}

        <div id="agree"><input type="checkbox" name="agree"><label>I agree to the CP Rules.</label></div>
        <div id="terms"><input type="checkbox" name="terms"><label>I agree to the <a id="hyper" href="#">Terms of Use</a></label></div>

Want it like this https://i.imgur.com/07BerWV.png

CodePudding user response：

You could introduce a wrapper element with set width that would be the thing justified so the content is still aligned.

#hyper {
    color: #01539C;
    font-family: BurbankSmallBold;
    text-decoration: none;
   }
#terms, #agree  {
   font-family: ArialRegular;
   font-size: 10pt;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
}
.toggle {
   width: 250px;
}

    <div id="agree"><span ><input type="checkbox" name="agree"><label>I agree to the CP Rules.</label></span></div>
    <div id="terms"><span ><input type="checkbox" name="terms"><label>I agree to the <a id="hyper" href="#">Terms of Use</a></label></span></div>

CodePudding user response：

Is that what you were going for?

The outer div represents the area you want your items to be centered in (here stretched to the entire width)
The inner div is just a normal div, and it is centered in the outer div.
Everything inside the inner div is just normal html positioning without flex; left-aligned and in two lines as there are two nested divs

For more information about Flex positioning, I can recommend this:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#hyper {
    color: #01539C;
    font-family: BurbankSmallBold;
    text-decoration: none;
}
#terms, #agree  {
   font-family: ArialRegular;
   font-size: 10pt;
}
#checkboxalignment  {
   background-color: lightblue;
   display: flex;
   justify-content: center;
}
#checkboxes  {
   background-color: lightgreen;
}

<div id="checkboxalignment">
    <div id="checkboxes">
        <div id="agree"><input type="checkbox" name="agree"><label>I agree to the CP Rules.</label></div>
        <div id="terms"><input type="checkbox" name="terms"><label>I agree to the <a id="hyper" href="#">Terms of Use</a></label></div>
    </div>
</div>

CodePudding user response：

if u justify-content:center; each one has same font-size but the number of letters is different thus they wont be aligned. I suggest that u only keep the font-family, font size and add margin-left: 40% or w/e value u see fit. I assume this will work.