How to align radio/checkbox along with labels to center?

HTML-CSS
1

I have wasted hours just doing this. Can please someone help me ???

Here is my HTML:

<div class="label-block">Are you married ? </div>
			<div>
  				<input type="radio" name="marriage" value="no" class="greyColor">
  				<label for="marriage" class="radio_Label">No way</label>
			</div>
		
			<div>
  				<input type="radio" name="marriage" value="maybe" class="greyColor">
  				<label for="marriage" class="radio_Label">Perhaps. I don't know</label>
			</div>

			<div>
  				<input type="radio" name="marriage" value="yes" class="greyColor">
  				<label for="marriage" class="radio_Label">Yeah! Of course</label>
			</div>

My CSS:

html, body {
	margin: 0;
	height: 0;
	background-color: #325B79;
}

#bg {
	background-color: orange;
	width: 1000px;
	margin: 50px auto;
	border-radius: 20px;
}

#title, #description {
	font-family: 'Jolly Lodger';
	font-weight: 800;
	text-align: center;
	letter-spacing: 2px;
}

#title {
	font-size: 100px;
	padding-top: 90px;
}

#description {
	font-size: 30px;
	margin-bottom: 0px;
}

hr {
	border: 2px solid black;
  	border-radius: 5px;
  	width: 400px;
  	margin-bottom: 50px;
}

.label-block {
	font-family: 'Jolly Lodger';
	font-size: 40px;
	text-align: center;
	margin: 10px;
	color: blue;
}

#bg > form {
	color: white;
	padding: 40px;
	font-family: 'Jolly Lodger';
	font-size: 22px;
	letter-spacing: 1px;
}

#bg > form > input, select, textarea {
	font-family: 'Jolly Lodger';
	font-size: 22px;
	letter-spacing: 1px;
	padding: 0px 6px;
	background-color: #2C2F33;
	border: 1px solid white;
	color: #fff;
	display: block;
	margin: auto;
	margin-bottom: 50px;
}

#bg > form > input {
	width: 200px; 
}

#bg > form > textarea {
	width: 500px;
}

.greyColor {
	color: #325B79;
}

The result is:

Screenshot%20(68)
Screenshot%20(68)1366×305 58.3 KB

HOW CAN I ADJUST THEM TO CENTER LIKE MY OHTER THINNGS ?
WHY CAN’T I DO IT ?

2

You need to set with a div

div,.container
{
width: 100%;
}

To get center…

3 Likes
3

Here a quick codepen i’ve made some time ago as an example.
Hope it helps.

Happy coding.

2 Likes
4

You need create the div for content the others divs.

<div class="label-block">Are you married ? </div>
      <div class="all-divs">
		 <div>
  		 <input type="radio" name="marriage" value="no" class="greyColor">
  		 <label for="marriage" class="radio_Label">No way</label>
		 </div>
	         <div>
  	         <input type="radio" name="marriage" value="maybe" class="greyColor">
  	         <label for="marriage" class="radio_Label">Perhaps. I don't know</label>
		 </div>
                 <div>
                <input type="radio" name="marriage" value="yes" class="greyColor">
                <label for="marriage" class="radio_Label">Yeah! Of course</label>
                </div>]
      </div>

And created CSS rules for this:

.all-divs{ text-align:justify; display:flex; flex-direction:column; align-items:center; justify-content:center; }

But… is better created class for the all divs, because then apply rules CSS its more easy. Try check this page with the inspector https://codepen.io/freeCodeCamp/full/VPaoNP and you can see that the text-align rule is applied to all the <html> therefore it is easier if you want all your form in center of page, including radio buttons and text of these.

But you dont want all the form in the center, try to add one class for all the radio buttons and align them and another class for all the labels and align.

Good Luck!

1 Like
5

Ty it works for me!
I was trying to put the checkboard inside a table column.

2 Likes