Is it possible to center a radio button within an inline-block? I have provided a demo on JSFiddle that displays the current layout and how I envision it should appear.
Here is the code snippet in question:
<span style="width: 45px; height: 45px; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #006884"><input type="radio" name="Color" id="radio" value="006884"></span>
<span style="width: 45px; height: 45px; line-height: 45px; text-align: center; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #006884"><input type="radio" name="Color" id="radio" value="006884"></span>
<span style="width: 45px; height: 45px; line-height:45px; text-align:center; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #006884"><input type="radio" name="Color" id="radio" value="006884"></span>
<span style="width: 45px; height: 45px; line-height:45px; text-align:center; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #00909E"><input type="radio" name="Color" id="radio" value="00909E"></span>
<span style="width: 45px; height: 45px; line-height:45px; text-align:center; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #89DBEC"><input type="radio" name="Color" id="radio" value="89DBEC"></span>
<br>
<br>
<p>Achieving the layout of the boxes shown below with a central radio button, without resorting to using a table.</p>
<table cellpadding="10">
<tr>
<td bgcolor="#006884"><input type="radio" name="Color" id="radio" value="006884"></td>
<td bgcolor="#00909E"><input type="radio" name="Color" id="radio2" value="00909E"></td>
<td bgcolor="#89DBEC"><input type="radio" name="Color" id="radio3" value="89DBEC"></td>
</tr>
</table>Insert this into your stylesheet
#radio{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
span{
position:relative;
}
For inline styling, use the code below.
<span style="width: 45px; position:relative; height: 45px; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #006884"><input type="radio" name="Color" id="radio" style="margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" value="006884"></span>
In my website's design, I have a div structure with an iframe to load pages. The header remains at the top seamlessly The footer stays at the bottom perfectly The content is positioned in the middle flawlessly However, the iframe does not stret ...
<nav id="NavbarMaster" class="navbar NavCompression"> <!-- style="min-height:100px;" --> <div id="navToggler" class="container-fluid TitleBG TitleHeight"> <div id="navopener" class="Pointer" style="position:fixed;top:0;left:0; ...
Can anyone help me out? I am having trouble using AJAX to submit my form to one location and then to another. Once it's posted to the second location, I want it to send an email with PHP to a specified recipient, but for some reason, it's not wor ...
Using React and CSS. I have set up my application to display a faded image on hover, with text that fades in over it. However, I am facing an issue where touching the text with my cursor removes the fade effect. Does anyone have a solution for preventing ...
Just starting out with CSS and struggling with the flex property. Seems to work fine at larger sizes, but when I reduce the screen size to 320px, I run into issues... Can anyone help me display only the first three letters of "basketball ...
I am currently working with bootstrap text boxes in the following manner: <div class="row"> <div class="col-lg-4"> <p> <label>Contact List</label> <select class="form-control" id="list" name="li ...
Why is this basic HTML and JavaScript code not functioning properly? Instead of alerting once the form is submitted, it refreshes the page and throws an error. It has also been reported to sometimes throw a CORS error when using 'module' as scri ...
document.getElementById('scdiv').innerHTML=Quantity <td id="scdiv"> </td> document.getElementById('quantitydiv').innerHTML=mrp <td id="quantitydiv"> </td> I am currently facing an issue where the code is being d ...
Is there a way to detect when my table is empty so that I can display an error message rather than showing an empty table? Here's the code snippet in question: <?php $search = $_REQUEST['search']; if ($search == "") { echo "Please e ...
I have a large chart that I need to showcase on my website, but due to its size it would take up too much vertical space and potentially overwhelm the user upon their first visit. My goal is to provide a preview of the chart, similar to an excerpt of text ...
Looking to conceal a label using CSS <p class="half_form "> <label for="property_bathrooms">Bathrooms (*only numbers)</label> <input type="text" id="property_bathrooms" size="40" class= ...
Currently preparing PSDs for the development of both an iOS and Android app. When it comes to coloring text, should I: 1) Utilize #000000 for black text, adjusting opacity to achieve various shades of gray for primary and secondary text? 2) Or opt for a ...
After editing the code snippet below... <div id="rt-utility"><div class="rt-block fp-roksprocket-grids-utility title5 jmoddiv"> I applied the changes in my custom.css file like this: #rt-utility .rt-block {CODE HERE} However, when attemptin ...
Having never worked with jquery before, I struggled to find a solution for my specific case. On the cockpit.php page, I have a form that retrieves content from a mysql database. Currently, I am able to display this content in a div on the same cockpit.php ...
Using Jquery to dynamically return a list of products, render it as HTML, and show it on the page using $(selector).html(html), I've encountered an issue. When adding products to the cart too quickly, which triggers the rendering of the cart again, th ...
I recently made a tweak to this code that successfully moves the background in the opposite direction of the scroll. However, there is now an issue where it leaves a blank space at the top, even when the background is set to repeat. The change I made was s ...
I have attempted to interact with a button in the given HTML using Python (Selenium WebDriver). <div class="cssm-TopNav_printIcon_2VzB_"> <button type="button" aria-label="Print" title="Print" class="cssm-Button_button_2a549 cssm-Button_secondar ...
I've been working on integrating a gallery of images into my posts. My goal is to display 4 images initially, followed by a "load more" button that, when clicked, will reveal another set of 4 images, and so on. I have already created the HTML, CSS, an ...
Is there a way to change the background image of a div based on user selection from a dropdown menu? For instance, if the user picks "white" the background image becomes white, and for "red" it changes to red. I'm struggling with this in coffeescript ...
After searching high and low, I couldn't find a similar question. My goal is to transform this from a vertical layout to a horizontal one: https://i.stack.imgur.com/4kZNM.png Check out the code snippet below: ghost<br class="newline"> <img ...