How can i organise radio buttons to the straight left sided line while keeping them at the center?

Question

<!-- I tried to change text alignment to center, display to flex, etc. but didn't work -->

<div>
<form>
<p class="heading2">Are you cool?:</p>
<input type="radio" id="yes" name="cool" value="Yes">
<label for="yes">Yes</label><br>
<input type="radio" id="no" name="cool" value="No" >
<label for="no">No</label><br>
</form>
</div>

Answer 1

Use display:flex with justify-content:centre; align-items:centre;

This will align both horizontally and vertically

Answer 2

Can you share your whole code?

https://sololearn.com/compiler-playground/Wek0V1MyIR2r/?ref=app

Answer 3

You can try this CSS:

div {
display: flex;
justify-content: center;
/* Centers horizontally */align-items: center;
/* Centers vertically */
height: 100 vh;
/* Optional: 100vh makes the div container element fill the full viewport height */
gap: 10 px
*/Optional: this defines the gap between the radio button and its label. It merely enhances readability, so you can stick to the default spacing*/
}

form {
display: flex;
flex-direction: column;
align-items: flex-start;
}

Answer 4

display:flex;
align-items:centre;

Answer 5

There is, in fact, another alternative method: CSS Grid.
Since you want the form to be center-aligned and the radio buttons left-aligned, you can try this out as well.

Nest ALL THE RADIO BUTTONS inside a <div class="radio_grp">.

The CSS code is:
div { */This is for the div tag that has enclosed the entire form*/
display:grid;
place-items:center */This will center-align the text both horizontally and vertically */
}

form{
display:grid;
place-items:left; */This will align the form elements to the left.*/
}

.radio_grp{ */This is for the div tag enclosing the radio buttons */
display:grid;
grid-template-columns: auto 1fr; */ This will make the radio button go in one column and the label in the adjacent one */

Answer 6

<style>
.container, form, .cb{
margin: auto;
}
.heading2{
text-align:center;
}
form, .cb{
width:fit-content;
}
</style>

<div class="container">
<form>
<p class="heading2">Are you cool?:</p>
<div class="cb">
<input type="radio" id="yes"
name="cool" value="Yes">
<label for="yes">Yes</label>
<br>
<input type="radio" id="no"
name="cool" value="No" >
<label for="no">No</label><br>
</div>
</form>
</div>

Answer 7

U can use the method shown by Ushasi Bhattacharya, additionally, assigning
display: block;
margin:auto;
Will do the work too