Achieve seamless alignment of radio group labels alongside radio buttons through the use of only CSS

After using a table to display radio buttons with labels in the past, I am now attempting to achieve the same result using only CSS.

Is there a CSS technique that will allow me to position the label text neatly on top of the corresponding radio button? Here is the HTML code snippet:

<div class="controls">
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_1" value="1">
        Never
    </label>
    <label class="radio">
         <input type="radio" name="cfimb_5" id="id_cfimb_5_2" value="2">
    </label>
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_3" value="3">
        Sometimes
    </label>
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_4" value="4">
    </label>
    <label class="radio">
        <input type="radio" name="cfimb_5" id="id_cfimb_5_5" value="5">
        Frequently
    </label>
</div>

You can view the codepen here: http://codepen.io/anon/pen/keuhl

htmlcss

Answer №1

In the past, achieving this layout required using margins:

.controls label {
    display: inline-block;
    width: 90px;
    height: 20px;
    text-align: center;
    vertical-align: top;
    padding-top: 40px;
}
.controls input {
    display: block;
    margin: 0 auto -40px;
}
<div class="controls">
  <label class="radio">
    <input type="radio" name="foo" value="1">
    Never
  </label>
  <label class="radio">
     <input type="radio" name="foo" value="2">
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="3">
    Sometimes
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="4">
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="5">
    Frequently
  </label>
</div>

However, with modern browsers that support flexbox, the solution is much simpler:

.controls {
  display: flex;
}

.radio {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div class="controls">
  <label class="radio">
    <input type="radio" name="foo" value="1">
    Never
  </label>
  <label class="radio">
     <input type="radio" name="foo" value="2">
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="3">
    Sometimes
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="4">
  </label>
  <label class="radio">
    <input type="radio" name="foo" value="5">
    Frequently
  </label>
</div>

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

Place the border image underneath the div element

I successfully added a border image to the right side of my div, but now I want it to extend slightly below the div. Is there a way to increase the height of the border image? Or should I just float the image next to the div and how would I go about doing ...

htmlcssborder

Emphasize the interactions within the table cells based on their corresponding column and row

I'm looking to achieve a specific interaction in my Angular Material table. I want to highlight the table cell interactions with column and row by extending the highlighting up to the column header and left to the row header. Is this something that ca ...

htmlcssangularangular-material

Tips for maintaining the particles.js interaction while ensuring it stays under other elements

I have incorporated particle.js as a background element. By adjusting the z-index, I successfully positioned it in the background. While exploring solutions on the Github issues page, I came across a suggestion involving the z-index and this code snippet: ...

javascripthtmlcssparticle.js

Choosing a menu option with jQuery

Can someone help me with making a menu option selected in HTML? Here is my code: <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon"><img src="images/home.png" ...

jqueryhtmlcss

Making adjustments to a Jquery data attribute can have a direct impact on CSS

My CSS is using a data attribute, but when I try to change it with jQuery, the change is not reflected on the screen or in the DOM. $('#new-1').data('count', 5); .fa-stack[data-count]:after { position: absolute; right: -20%; to ...

javascriptjqueryhtmlcss

To enhance the appearance of an input field, implement the Bootstrap check feature

Using bootstrap in my app, I am dealing with a readonly input where I would like to add a checkmark inside of it. My attempt to simply add <input readonly type="text" id="kyc_status" class="form-control" value="Success ...

htmlbootstrap-5

Converting multi-dimensional array into a structured table format

Query about arrays: Here is the array structure I am working with: Array ( [0] => Array ( [0] => Project [1] => Time ) [1] => Array ( [0] => Google [1] => 2 ...

phphtml

Error encountered while attempting to load JSON data into HTML audio element

I need to incorporate data from a JSON file into an HTML audio tag. While I've been able to extract the desired information from the JSON, I'm facing difficulty loading it into HTML. Here's what I've tried so far: <?php $json = file ...

phpjsonhtml

Tips on Incorporating CSS in import.io Connect Extract

By utilizing the import.io connector, I successfully extracted a portion of HTML from the source website. The output was returned as "html" type, consisting of a single table of data with styles defined in the body HTML but not fully extracted. Consequentl ...

htmlcssconnectorimport.io

Tips on accessing the v-model value with a parameter in VUE

Looking to access the v-model value using a parameter, I attempted the following code: <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click=&q ...

javascripthtmlvue.js

Excessive Font Awesome Icons causing navigation bar to appear oversized

My Font Awesome icons are causing my navbar to expand in height. Despite resetting all margin and padding to 0, adjusting the margins and paddings of the icons has not helped. I even tried setting negative top and bottom margins/paddings. https://i.sstati ...

htmlcsstwitter-bootstrapfont-awesome

Executing a click on a checkbox element in Python with Selenium

Background: Currently, I am in the process of developing a Python script that will automatically download listings from a specific website. I have successfully programmed the script to navigate the webpage, search for keywords, click on the search button, ...

javascriptpythonhtmlseleniumweb-scraping

The components of my website shift and adjust as the size of the page is changed

I've been experimenting with different properties, but my CSS just won't stay in place. I've tried using absolute and fixed positioning, but without success. I want the elements to remain in their respective positions - the greeting on the l ...

htmlcssreactjscss-selectorsjsx

What is the method for superimposing a div with a see-through input field?

I am currently designing a compact upload feature. It consists of a responsive element (actually a vue/quasar card) that adjusts in size according to the window dimensions and viewport. Within this element, there is a form containing an input field and a ...

csshtml

Differences in tabstrip appearance between FireFox on Mac and Ubuntu compared to FireFox on PC

I've encountered an issue with my simple css tabstrip. It seems to render correctly in: Safari 5.0.2 on Mac IE8 on PC FireFox 3.8.12 on PC However, when viewed on FireFox 3.8.12 on Mac and Ubuntu, the tabs overlap the bottom border of the containe ...

cssfirefoxplatform-specific

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

I am looking for a way to display a list of numbers from 1 to 1000 in a single line with the ability to scroll. However, I need to exclude both "Prev" and "1" from this list. How can I achieve this? Below is the code snippet that I currently have: echo ...

phphtmlcsstwitter-bootstrappagination

Positioning an absolute div inside a relative div within a v-for loop while using VueJS and Element UI

I am experimenting with rendering a list of <el-card> items using a transition-group. Each card has a front and back side that flip when a button is clicked. To achieve a smooth flip transition, I need to apply the style: position: absolute; top: 0; ...

cssvue.jselement-ui

Creating an adaptable image with CSS or Material UI

Is it possible to create a responsive image that shifts from the top right position to the bottom as the size decreases? I've been using Material UI but haven't found any guidance on how to achieve this. .my-photo{ height: 300px; positio ...

cssmaterial-ui

Steps to automatically navigate to a specific Div upon page initialization

Can someone help me understand why my code is scrolling to a div and then returning back to the top of the page? $("#Qtags").click(function(){ $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}, ...

javascriptjqueryhtml

Steps for displaying a website within a specific Div using HTML

I'm trying to set up a website to open within a specific <div> tag, like the example shown in this link: Responsive. Can anyone spot what I'm doing incorrectly? <html> <head> <script> function mobile320() { ...

javascriptjquerycsshtml