Center the radio buttons regardless of the length of the text

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?

htmlcsstwitter-bootstrap-3

Answer №1

It appears that you are utilizing Bootstrap 3.3.7, so I have made the necessary adjustments to ensure compliance with this version. I have also streamlined the CSS for clarity and included display: table !important to override the default bootstrap behavior, enabling us to eliminate excess space and centrally align the container.

You can view the updated demonstration here: http://jsfiddle.net/xquj471a/75/

CSS:

.center-block{display: table !important;}

Html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="center-block">
    <div class="radio">
      <label for="trans-1">
        <input type="radio" name="transaction" id="trans-1" value="0">
        Faster than I expected?
      </label>
    </div>
    <div class="radio">
      <label for="trans-2">
        <input type="radio" name="transaction" id="trans-2" value="1">
        About the time I expected?
      </label>
    </div>
    <div class="radio">
      <label for="trans-3">
        <input type="radio" name="transaction" id="trans-3" value="2">
        About the time I expected?
      </label>
    </div>
  </div>
</div>

Answer №2

.radio-wrapper{
  margin-bottom: 2%;
  margin-left: 45%;
}

.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
}

Implement this CSS code for the design. You can remove the CSS tag ".wrapper".

Answer №3

After reviewing your code, I noticed that you have not utilized the necessary bootstrap classes. The "row" and "col-md-*" classes are essential for structuring your layout effectively. Please refer to the modified HTML snippet below:

<div class="row">
  <div class="radio col-md-1" id="uniform-trans-1">
    <span>
      <input type="radio" name="transaction" id="trans-1" value="0">
    </span>
  </div>
  <div class="col-md-3">
    <label for="trans-1">Faster than I expected?</label>
  </div>
</div>

<div class="row">
  <div class="radio col-md-1" id="uniform-trans-2">
    <span>
      <input type="radio" name="transaction" id="trans-2" value="1">
    </span>
  </div>
  <div class="col-md-3">
    <label for="trans-2">About the time I expected?</label>
  </div>
</div>

<div class="row">
  <div class="radio col-md-1" id="uniform-trans-3">
    <span>
      <input type="radio" name="transaction" id="trans-3" value="2">
    </span>
  </div>
  <div class="col-md-3">
    <label for="trans-3">Longer than I expected?</label>
  </div>
</div>

Here is a brief explanation of the mentioned classes:

  1. "row": The "row" class indicates to the browser that content should be divided using "col-md-*" classes.

  2. "col-md-*": When utilizing the "row" class, the total sum of numbers in "col-md-*" classes should not exceed 12. Each row consists of 12 parts that can be assigned to different content divisions using the "col-md-*" classes.

For more details, please visit Bootstrap Grid Documentation.

Best of luck with your coding!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to link multiple select tags in an HTML document?

I am working with a data grid that contains student information such as Name, Class, and Score. Each row has a checkbox for selection. The requirement is that when the user selects one or more rows and clicks on the "show information" Button, a new windo ...

htmlangulartypescript

Deciphering the principles of Bootstrap

I'm looking to understand more about what Bootstrap is. I know it's commonly used for styling web pages, but could you provide me with a clear explanation? Can big companies like Twitter, Facebook, or YouTube utilize Bootstrap for their platforms ...

htmlcsstwitter-bootstrap

Loading information in a directive by utilizing promises in a service with AngularJS

Can anyone lend a hand? I've been struggling to solve this issue. I created a directive (see below) to display a pre-written ul-list on a page using html data fetched asynchronously from a database server. Both the Directive and The Service are funct ...

javascripthtmlangularjsservice

Connect jQuery's resizable controls

Check out this jSFiddle. I am attempting to add event handlers for resizing $('oWrapper_'+num). However, the resizing does not occur. This is because $('#oWrapper_'+num) has not been added to the dom at the time of execution, so the se ...

javascriptjqueryhtmlcssjquery-ui

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

cssangulartypescriptanimation

Conceal the div by clicking outside of it

Is there a way to conceal the hidden div with the "hidden" class? I'd like for it to slide out when the user clicks outside of the hidden div. HTML <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.c ...

javascriptjqueryhtmlcss

Dynamically include new events

Here is the code snippet I have in a JS file: $(".dropmenu").on("click", function(event){ event.preventDefault(); $(this).parent().find("ul").slideToggle(); }); On my webpage, I'm using the following code: var append="<ul> ...

jquerycsseventsdynamic

What is the CSS selector used to target elements that are not contained within another selector?

There are numerous nested divs within my code: <div> <div> <div>Apple</div> <div> <div>Banana</div> <div>Grape</div> </div> </div> <div>Craisin</div&g ...

css

Eliminating quotation marks from individual elements within a JavaScript array that includes JSON-encoded HTML strings retrieved from a MySQL database using PHP

Performing an Ajax call to fetch data from a MySQL database using the data1.php file with PDO results in HTML strings being stored in an array, encoded into JSON format, and then sent to the Ajax response function for display on a webpage. However, dealing ...

phphtmljsonajaxquotes

Two CSS Issues - One specific to mobile devices, the other unique to Chrome browser

Having trouble with the top banner not stretching all the way on iPhone. Any solutions? Here's a screenshot for reference: Below is the CSS applied to the div: #banner { background-color: #F7F7F7; background-size: cover; box-shadow: 0 0 ...

iphonecssmobilehtml

Resizing columns in HTML table remains effective even after the page is refreshed

I've created HTML pages with tables that have multiple columns, but I'm experiencing an issue. The columns are not resizable until I refresh the page. Could someone assist me in fixing this problem and explaining why it's happening? ...

javascriptjqueryhtml

Tips for adjusting CSS font sizes within a contenteditable element?

I am looking to develop a compact HTML editor using JavaScript that allows me to customize the font-size of selected text with a specific CSS value. The documentation states that the FontSize command is used like this: document.execCommand("FontSize", fal ...

javascripthtmlcontenteditable

The Typescript Select is displaying an incorrect value

Here's the code snippet I've been working with: <select #C (change)="changeSelect(zone.id, C.value)"> <option *ngFor="let town of townsLocal" [attr.value]="town.data" [attr.selected]="town.data === zone.town && 'selected& ...

javascripthtmltypescriptionic2

Dynamic Height in React Material-UI Table with Sticky Headers and Multiple Rows

Currently, I am working with React and Material-UI to create a table that needs to have a sticky header for a multi-row table head. The challenge I'm facing is that I don't want to specify a fixed height for the table, but instead have all lines ...

htmlcssreactjsmaterial-ui

ERB failing to interpret Ruby script

Hello, my index.html.erb file looks like this: <h1>Bookmarks</h1> t <% @books.each do |b| %> <div class="book"> e <div class="row"> s <div class="col-md-1"> t <p class="rank-this ...

htmlruby-on-railsrubyerb

What is the reason behind MySQL rejecting float values?

inquiry in .php $que_cinstructors = " INSERT INTO course_instructors ( usn, i1, i2, i3, i4, i5, i6, i7, i8, i9 ) VALUES ( :usn, :i1, :i2, :i3, :i4, :i5, :i6, :i7, :i8, :i9 )"; $query_params3 = array( ':usn' => ...

phphtmlmysql

Is it possible to achieve a height transition using CSS instead of relying on JavaScript

I created these custom cards using a combination of HTML, CSS, and JavaScript. However, I've noticed that the height transition animation is not as smooth as I'd like it to be, especially on certain pages. Is there a way to achieve this animation ...

javascriptjqueryhtmlcss

What is preventing my image from moving upwards?

I've been struggling to move this image up, despite trying several methods. I really want it to be aligned horizontally with the PV picture. I need the HP image to be moved directly upwards so that it aligns horizontally with the PV image. This is t ...

htmlimagecss

hover-triggered keyframe animation

Recently, I've been experimenting with CSS keyframe animation using the code below: .pulse-animation { margin: 50px; display: block; width: 52px; height: 52px; border-radius: 50%; background: #ff8717; cursor: pointer; animation: pul ...

htmlcsskeyframe

Steps for modifying the width of a horizontal line element so that it aligns with an input element

I'm attempting to dynamically adjust the hr element's length based on the length of the input element by using CSS. Additionally, I'd like to incorporate an animation that triggers when the input is focused. I came across a solution for th ...

htmlcss