I have several radio buttons with labels that vary in length. I am trying to figure out how to center them horizontally so that the labels are centered on the page, but still appear as if they are left-aligned.
Desired result:
Current HTML snippet:
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label><br />
Using the CSS property display: table can be really helpful in achieving this layout:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<style>
div {display: table; margin: 0 auto; padding: 30px; background: #e7e7e7; border: 1px solid black;}
</style>
</head>
<body>
<div>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text</label><br>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable</label><br>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label>
</div>
</body>
</html>
To achieve this layout, you can center-align a <div> element and then use an inline-block styled <span> within it.
<div style="text-align: center;">
<span style="text-align: left; display: inline-block; border: 1px solid black; padding: 0.5em;">
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Variable text length</label><br />
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of varying length variable length</label><br />
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Adjustable text length variable</label><br />
</span>
</div>
To achieve a cleaner look, consider utilizing a table without borders and keeping the radio buttons separate from their corresponding labels.
Alternatively, if tables are not your preference, try using div elements with relative positioning and potentially setting the float attribute to left for alignment.
Having trouble setting focus on the dropdown list in my PHP page dc-test.php, where there are two dropdown lists that are interdependent. The values for these dropdown lists are fetched from a database table. I am unable to set focus on the first dropdown ...
I have a test page on my website: If you'd like to check it out, feel free to visit: I am trying to create a feature where when you hover over an image, a black button with text and links will appear. When you move your mouse away from the image, ...
Is it possible to obtain the height of each row within a flexbox container using JavaScript? For instance, if there are 3 rows in the container, can I retrieve the height of the second row specifically? ...
I am struggling to figure out how to embed a table inside a button in order to display the table when the button is clicked and hide it when clicked again. Below is the code I have been working with: function toggleTable(){ document.getElementById ...
I've been struggling to include a custom font in my project, but it's not working as expected. Here's how I added it to the .css file: @font-face { font-family: 'Open Sans'; src: url('/open-sans.eot'); src: u ...
In this particular scenario, there is a table included: <table id="table"> <thead> <tr> <th>Name</th> <th>Course</th> </tr> </thead> <tbody> <tr style="display:none"> ...
I'm trying to customize the background color of alternating rows in a Bootstrap 3 grid. I attempted to use CSS and add it to the class within the div, but unfortunately, the color isn't changing as expected. Below is the CSS code I used: .row-b ...
I am encountering an issue with the dropdown menu that is not closing when clicking outside of the menu button. Despite having faced this problem before, I can't seem to find a solution now. Any help would be greatly appreciated as I am uncertain why ...
Having trouble triggering Bootstrap's navbar with plain JavaScript/jQuery while using Bootstrap 3.3.6 and jQuery 1.11.3. The data structure provided for my application cannot be modified in terms of adding classes or ids. <ul> <li ...
Is there a way to create a function or button specifically for clearing select option fields? I attempted using <input type="reset" value="x" /> However, when I clear one field, all fields end up getting cleared. Should I provide my code that incl ...
The Problem Currently, I have a setup for an online store where the shopping cart can be viewed by hovering over a div in the navigation menu. In my previous prototype, the relationship between the shoppingTab div and the trolley div allowed the shopping ...
I'm attempting to showcase a value retrieved from an API (specifically used by PRTG software to extract information). Here is the link to the API: The API provides an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <ch ...
I stumbled upon this fascinating animation and I'm looking to incorporate it into my project. However, I'm facing a challenge in centering text inside the circle without resorting to using position absolute. My goal is to have the text with the ...
I have recently started diving into Material UI - Grid and this question is a continuation of my previous query about defining CSS classes for Material UI components, specifically the classes.root Sunny day with a chance of rain I made some changes b ...
I am currently putting the finishing touches on a basic website for a project I'm involved in. The site features two tab controls - one on the right side of the page and the other on the left. Each control has 3 tabs that, when clicked, display differ ...
I am currently in the process of developing a web application with multiple pages, including index.html which serves as the main page and contains various <a> tabs linking to different Servlet pages. As part of my design, I have a consistent CSS lay ...
Hi there, I've encountered an issue with Material UI CSS. Even after attempting to override it, the desired effect is still not achieved. My goal is for the entire div to occupy the full page but this is the current result: https://i.stack.imgur.com/b ...
I am currently facing an issue with my GridView that contains images. When I hover over the top of the image, it displays correctly, but when I move to the bottom, it does not show up. After some investigation, I suspect that there may be an overlay being ...
I am working with two sortable div containers that are connected using connectWith. Both containers contain draggable items that can be moved as desired. These items have specific classes such as group1 and group2. Let's refer to the containers as con ...
I'm currently working on a project where I have two overlapping scenes. The top scene can be faded in and out using a slider, and users can rotate objects within the scene for a better view. My challenge is to keep the camera position consistent betw ...