Vertically Aligning Text Next to a Radio Button

Vertically aligning text next to a radio button

Use it inside a label. Use vertical-align to set it to various values -- bottom, baseline, middle etc.

http://jsfiddle.net/UnA6j/5/

Align text next to radio button

DEMO

.rButton {
    width: 63px;
    height: 52px;
    vertical-align: middle;
}
.convText {
    font-family:'Segoe UI';
    font-size:20px;
    vertical-align: middle;
}

Vertical-align docs

Vertical align text on radio input

Add this styling

.buttonsform label {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

Vertically align Radio Buttons

Using text-align: left; with display: inline-block; solved your problem

body {  margin: 0px;  background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);}
#wrapper {  padding-top: 0px;  text-align: center;  margin-top: -1%;  margin-left: 20%;  margin-right: 20%;  background-color: white;  clear: both;}
#quiz {  padding-bottom: 10px;}
#quiz li {  list-style-type: none;}
.question {  padding-bottom: 10px;  vertical-align: middle;}
.wrap {  text-align: left;  display: inline-block;}

<div id="wrapper">
  <div id="quiz">

    <form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">      <li>        <div class="question">1. How many continents are there?</div>      </li>      <input id="answer" type="radio" name="group1" value="wrong"> 6<br>      <input id="answer" type="radio" name="group1" value="wrong"> 8<br>      <input id="answer" type="radio" name="group1" value="correct"> 7<br>      <input id="answer" type="radio" name="group1" value="wrong"> 5      <hr>

      <li>        <div class="question">2. Where is France located?</div>      </li>      <div class="wrap">        <input id="answer" type="radio" name="group2" value="correct">Europe<br>        <input id="answer" type="radio" name="group2" value="wrong">Asia<br>        <input id="answer" type="radio" name="group2" value="wrong">Antarctica<br>        <input id="answer" type="radio" name="group2" value="wrong">North America      </div>      <hr>    </form>
  </div></div>

Vertically aligning radio buttons in center aligned text

You need to centre the div and then align your radios to that div so:

#main {  text-align: center;  margin: 0 auto;}
#radioDiv {  margin: 0 auto;  width: auto;  text-align: left;  display: table;}

<div id="main">  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br/>
  <div id="radioDiv">    <br/><input type="radio" name="example" value="x">x    <br/><input type="radio" name="example" value="xx">xx    <br/><input type="radio" name="example" value="xxx">xxx  </div></div>

---

Related Topics