My dilemma lies with 3 radio buttons and their corresponding labels - while 2 of them are aligned perfectly beneath each other due to their matching character lengths, the middle one extends further making it look misaligned.
Check out this fiddle.
Below is the code snippet:
.wrapper{
text-align: center;
vertical-align: middle
}
.radio-wrapper{
text-align: center;
margin-bottom: 2%;
}
.radio{
position: relative;
width: 18px;
height: 18px;
margin: 0 !important;
padding: 0;
display: inline-block !important;
zoom: 1;
vertical-align: middle;
}
.radio span{
zoom: 1;
text-align: center;
vertical-align: middle;
}
.radio input[type=radio]{
position: absolute;
margin-left: -20px
}
.radio input{
border: none;
background: none;
display: inline-block;
zoom: 1;
text-align: center;
width: 18px;
height: 18px;
}
input[type=radio] {
margin: 4px 0 0;
line-height: normal;
}
label{
margin-bottom: 3px;
vertical-align: sub;
position: relative;
font-weight: bold;
font-size: 13px;
display: inline-block;
cursor: pointer;
text-align: left;
}<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="center-block wrapper">
<div class="radio-wrapper">
<div class="radio" id="uniform-trans-1">
<span>
<input type="radio" name="transaction" id="trans-1" value="0">
</span>
</div> <!-- .radio -->
<label for="trans-1">Faster than I expected?</label>
</div> <!-- .radio-wrapper -->
<div class="radio-wrapper">
<div class="radio" id="uniform-trans-2">
<span>
<input type="radio" name="transaction" id="trans-2" value="1">
</span>
</div> <!-- .radio -->
<label for="trans-2">About the time I expected?</label>
</div> <!-- .radio-wrapper -->
<div class="radio-wrapper">
<div class="radio" id="uniform-trans-3">
<span>
<input type="radio" name="transaction" id="trans-3" value="2">
</span>
</div> <!-- .radio -->
<label for="trans-3">Longer than I expected?</label>
</div> <!-- .radio-wrapper -->
</div> <!-- .wrapper -->
</div> <!-- .container -->Is there a way to neatly align all three inputs in a column regardless of the length of the label text next to each one?