How to Center Radio Button
See this fiddle
Remove float:left; from your CSS for .tab and add display:inline-block;
Also, add
.allTabs {
text-align: center;
}
to your CSS
So, the complete CSS would be as below
.allTabs {
text-align: center;
}
.tabs {
min-height: 200px;
clear: both;
}
.tab {
display: inline-block;
}
.tab label {
background: white;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab[type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border-top: 4px solid #DADEDE;
margin-top: 4px;
}
[type=radio]:checked ~ label {
background: white;
padding-bottom: 0px;
border-bottom: 4px solid blue;
margin-bottom: 5px;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
My Checkboxes or Radio Buttons Do Not Align Properly?
It's because your .box class has the text-align set to center. So your labels are honoring that rule, as are the checkboxes. It only 'looks' weird because your label content are variable in length, so the shorter words become closer to the center.
There are a lot of ways to style this and I don't know what you need holistically, but a solution is to just wrap them in a container that will be centered by .box and reset the alignment, keep in mind that any white-space before the word is included too:
#money-container {
text-align: left;
width: 100px;
margin: auto;
}
<div id="money-container">
<label>
<input type="radio" name= "trip" value = "check" class= "money">check<br>
</label>
<label>
<input type="radio" name= "trip" value = "cash" class= "money">cash<br>
</label>
<label>
<input type="radio" name= "trip" value = "other" class= "money">other
</label>
</div>
body { height: 920px; width: 1300px; margin: 0 0 0 0; font-family: 'Roboto';}
#subtag { width: 80%; text-align: center; margin-left: 75px;}
.container { background-image: url("https://images.unsplash.com/photo-1491800943052-1059ce1e1012?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80"); background-size: cover; background-repeat: no-repeat; position: relative; height: 920px; overflow: auto;}
.container::before { content: " "; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 920px; background: rgba(0, 0, 0, 0.6);}
.box { margin-left: auto; margin-right: auto; margin-top: 25px; width: 700px; height: 890px; border: 3px solid black; text-align: center; background-color: #f2f2f2; opacity: 0.6;}
.textbox { width: 80%; background-color: #80bfff; padding: 8px 8px; margin-top: 10px; margin-bottom: 10px;}
#submit { font-size: 14px; color: #d6d4e0; width: 270px; height: 40px; background-color: #6b5b95; opacity: 1.0;}
#submit:hover { cursor: pointer;}
#money-container { text-align: left; width: 100px; margin: auto;}<div class="container"> <div class="box">
<h3> Villa's Traveling Survey </h3> <p id="subtag"> If there is anything that we can do better please let us know by filling out the survey below </p>
<form> <label for="fname"> Name: </label> <br> <input type="text" name="fname" placeholder="enter name" class="textbox"> <br> <label for="email"> Email: </label> <br> <input type="text" name="email" placeholder="enter email" class="textbox"> <br> <label for="age"> Age: </label> <br> <input type="text" name="age" placeholder="enter age" class="textbox"> <p> Travel Destination: </p> <select name="country"> <option disabled selected value="Select Your Travel Destination"> Select Your Travel Destination </option> <option value="Australia"> Australia</option> <option value="New Zealeand"> New Zealand </option> <option value="Thailand"> Thailand </option> </select>
<p> How did you pay for your trip? </p>
<div id="money-container"> <label> <input type="radio" name= "trip" value = "check" class= "money">check<br></label>
<label> <input type="radio" name= "trip" value = "cash" class= "money">cash<br></label>
<label> <input type="radio" name= "trip" value = "other" class= "money">other</label> </div>
<p> How did you get to your travel destination? </p> <br> <input type="checkbox" placeholder="plane" value="plane" class="checkbox">Plane <input type="checkbox" placeholder="boat" value="boat" class="checkbox">Boat <input type="checkbox" placeholder="train" value="train" class="checkbox">Train <input type="checkbox" placeholder="other" value="other" class="checkbox">Other
<p> What is your favorite color? </p> <label><input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end Projects</label > <br/> <label ><input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />back-end Projects</label > <br/> <label ><input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />love Projects</label >
<p> Please enter any additional comments or suggestions </p> <textarea rows="5" cols="50" maxlength="100" placeholder="Enter comments here"></textarea> <br> <input type="submit" value="submit" id = "submit"> </form>
</div></div>How to align radio buttons when using div?
You can use a flexbox for that.
.wrapper { display: flex;}
div[id^="answer"] { margin-left: 0.5rem;}<div class="wrapper"> <div id="radio1"><input type="radio" name="mcq" id="rad1" value="a"></div> <div id="answer1">Answer 1</div></div><div class="wrapper"> <div id="radio2"><input type="radio" name="mcq" id="rad2" value="b"></div> <div id="answer2">Answer 2</div></div><div class="wrapper"> <div id="radio3"><input type="radio" name="mcq" id="rad3" value="c"></div> <div id="answer3">Answer 3</div></div>How can I center scaled radio button icons in their DIV?
When in doubt, flexbox all the things. And add some wrappers... and a spacer.
I find CSS float maddening to work with, so I avoid it like the plague. And to answer your other question, whenever possible I include my svgs inline so the inner components can still be targeted/styled with CSS. This approach should work with either though.
I tried making a fiddle but couldn't get even the simplest code to work or display anything, so I'm not sure if that's me or them.... Works great locally in my browser though. https://imgur.com/AWrWK8Z
I made 2 additions, a middle spacer element set to flex grow so it takes up all the available space it can, pushing the other elements far to the right/left. And wrappers around the input/label pairs (and the lone left guy). I used flex on both the header container and the right and left child containers, to simplify vertical centering.
.header {
width: 100%;
height: 300px;
display: flex;
align-items: center;
background-color: #ddd;
}
.spacer {
flex: 1 0 auto;
background: rgba(200,200,200,1);
}
.left {
background-color: #bbb;
}
.right {
background-color: #ccc;
}
.wrapper {
display: flex;
height: 70%;
align-items: center;
outline: 1px solid blue;
}
.wrapper > div {
flex: 1 1 auto;
outline: 1px solid black;
}
<div class="header">
<div class="left wrapper">
<div>
<a>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="160" height="120"
viewBox="0 0 160 120"
version="1.1">
<g>
<circle cx="80" cy="60" r="50" fill="yellow" stroke="blue" stroke-width="10" />
</g>
</svg>
</a>
</div>
</div>
<div class="spacer"></div>
<div class="right wrapper">
<div>
<label class="myLabel">
<input type="radio" name="radioGroup" class="myradioG" checked>
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" style="fill:blue;" />
</svg>
</label>
</div>
<div>
<label class="inline-radio">
<input type="radio" name="radioGroup" class="myradioG">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect x="20" y="20" rx="15" ry="15" width="60" height="60" style="fill:red;" />
</svg>
</label>
</div>
</div>
</div>How to align Radio button at the center of the screen
Try android:gravity="center" in the xml for each RadioButton.
I see you're wrap_content, so theoretically that shouldn't do anything, but it looks like the icons are evenly divided, maybe the RadioGroup divides the space evenly so using android:gravity will have an effect.
Worth a shot I guess.
EDIT
Try this:
<RadioButton android:id="@+id/allcontacts"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:marginLeft="20dp"
android:gravity="center"
android:layout_weight="1"/>
You will have to play with the android:marginLeft="20dp" to get it properly centered, but that'll let you do what you're looking to do. I copied your layout and tested this time, so I know it works! :)
Radio buttons wont align to the left
Theres a lot of work an little bugs in your code. I will focus on the radio buttons. 2 main errors.
1- You are setting the radio buttons width to 50% with:
input {
width: 50%;
display: block;
margin: 10px 0px;
}
Solution comes to reset it in its own style
input[type="radio"]{
width: auto;
display: inline;
}
2- You are making all your text and radio buttons to just one label tag. This is not a good pratice. We can set on label for each radio button and text. An by adding its display to block, they will align.
label {
display: block;
}
Hope this helps :>
.feedback-background{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); position: absolute; top: 0px; display: flex; align-items: center; justify-content: center;}.feedback-content{ width: 500px; height: 600px; background-color: white; border-radius: 4px; padding: 20px;}
input { width: 50%; display: block; margin: 10px 0px;}
label { display: block;}
input[type="radio"]{ width: auto; display: inline;}<div class="feedback-background"> <div class="feedback-content"> <img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;"> <form action=""> Name: <input type="text" placeholder="Name"> E-Mail: <input type="text" placeholder="E-mail"> What do you think about us?<br> <textarea rows="6" cols="33" "name="comment"></textarea> <br> How would you rate us? <br> <label><input type ="radio" name="rating" id="rating" value="Excellent">Excellent</label> <label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label> <label><input type ="radio" name="rating" id="rating" value="Average">Average</label> <label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label> <label><input type ="radio" name="rating" id="rating" value="Extreamly Poor">Extremely Poor</label> <br> <br> <a href="#" id="btn1">SUBMIT</a> </form> </div></div>Related Topics
Why Don't Flex Items Shrink Past Content Size
How to Vertically Align Elements in a Div
How to Center Text (Horizontally and Vertically) Inside a Div Block
Make a Div Fill the Height of the Remaining Screen Space
Why Not Use Tables For Layout in Html
What to Do Regular Expression Pattern Doesn't Match Anywhere in String
What Does Enctype='Multipart/Form-Data' Mean
Targeting Flex Items on the Last or Specific Row
Does Id Have to Be Unique in the Whole Page
Vertically Align Text Next to an Image
Are (Non-Void) Self-Closing Tags Valid in Html5
How to Use a :Before or :After Pseudo-Element on an Input Field
Hide Scroll Bar, But While Still Being Able to Scroll
Position Absolute But Relative to Parent
Css When Inline-Block Elements Line-Break, Parent Wrapper Does Not Fit New Width