How to position a label above a radio button using CSS

Question

How to position a label above a radio button using CSS

I have been attempting to position a label above a radio button using CSS.

My desired outcome:

This is the code I am currently using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
label {
    display:block;
}
</style>
</head>
<body>
<form>
<input type="radio" name="opinions" id="radio-1" />
<label for="radio-1">Yes</label>

<input type="radio" name="opinions" id="radio-2" />
<label for="radio-2">No</label>

<input type="radio" name="opinions" id="radio-3"/>
<label for="radio-3">I don't know</label>
</form>
</body>
</html>

html css forms radio-button label

Answer 1

Answer №1

Here is an example of a styled list you can use:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
label {
    display:block;
}
ul {
    list-style: none;
    display: block;
}
ul li {
    float: left;
    display: block;
    width: 85px;
    text-align: center;
}
</style>
</head>
<body>
<form>
<ul>
<li><input type="radio" name="opinions" id="radio-1" />
    <label for="radio-1">Yes</label>
</li>
<li>
<input type="radio" name="opinions" id="radio-2" />
<label for="radio-2">No</label>
</li><li>
<input type="radio" name="opinions" id="radio-3"/>
<label for="radio-3">I don't know</label>
</li>
<ul>
</form>
</body>
</html>

Answer 2

Here is an example of a styled list you can use:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
label {
    display:block;
}
ul {
    list-style: none;
    display: block;
}
ul li {
    float: left;
    display: block;
    width: 85px;
    text-align: center;
}
</style>
</head>
<body>
<form>
<ul>
<li><input type="radio" name="opinions" id="radio-1" />
    <label for="radio-1">Yes</label>
</li>
<li>
<input type="radio" name="opinions" id="radio-2" />
<label for="radio-2">No</label>
</li><li>
<input type="radio" name="opinions" id="radio-3"/>
<label for="radio-3">I don't know</label>
</li>
<ul>
</form>
</body>
</html>

Answer 3

Answer №2

place the content in a div and align it to the center.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    label {
        display:block;
    }
    </style>
    </head>
    <body>
    <form>
<div>
    <input type="radio" name="opinions" id="radio-1" />
    <label for="radio-1">Yes</label>
</div>    
    <input type="radio" name="opinions" id="radio-2" />
    <label for="radio-2">No</label>

    <input type="radio" name="opinions" id="radio-3"/>
    <label for="radio-3">I don't know</label>
    </form>
    </body>
    </html>


div{
text-align: center
}

Answer 4

place the content in a div and align it to the center.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    label {
        display:block;
    }
    </style>
    </head>
    <body>
    <form>
<div>
    <input type="radio" name="opinions" id="radio-1" />
    <label for="radio-1">Yes</label>
</div>    
    <input type="radio" name="opinions" id="radio-2" />
    <label for="radio-2">No</label>

    <input type="radio" name="opinions" id="radio-3"/>
    <label for="radio-3">I don't know</label>
    </form>
    </body>
    </html>


div{
text-align: center
}

How to position a label above a radio button using CSS

Answer №1

Answer №2

Similar questions

Looking to design this chart using CSS and HTML?

Transferring the offset of jQuery from one element to another results in their positions being misaligned

Preventing special characters in an input field using Angular

Having trouble accessing data attribute value with PHP in jQuery

Is there a way to customize the background color when the Bootstrap 4 toggle switch is in the "checked" position?

"Challenges encountered while trying to format a table responsively with Bootstrap CSS

The iPhone screen is unresponsive, causing the webpage to zoom in to the top left corner repeatedly

What's the difference in width between Inline-Block and Float?

Retrieve the value of a nested JSON object using the name of an HTML form field, without the use of eval

Incorporating invisible surprises into a fixed menu that reveal themselves as you scroll

Troubleshooting problem with printing iframes on Firefox

send a variable across multiple web pages at the same time

Differences between Animation Easing in iOS and CSS3 Cubic Bezier Functions

What is the best method for clearing DOM variables and storage when a new innerHTML is loaded dynamically in a Single Page Application?

css malfunctioning user interface

Removing the new line using v-if in Vue.js

Adjust image size according to the browser's window resize using JQuery

What is the best way to hide my rectangle in HTML?

The collapsible section expands upon loading the page

Is it beneficial or detrimental to utilize a HTML Form?