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>
I am currently seeking a method to seamlessly insert an image within the text of my Django-powered blog. My goal is to achieve a layout similar to the one showcased in this example: https://i.stack.imgur.com/cFKgG.png The desired layout consists of two c ...
I need to create a "read-only" version of all my forms which contain multiple <input type="text"> fields. Instead of recoding each field individually, I'm looking for a more efficient solution. A suggestion was made to use the following: <xs ...
Looking to extract a specific div class value, subtract 500 from it, and display the result in another div. Unclear about the steps needed to show the subtraction outcome on the other div. Consider this scenario: <div class="main-value">6000</d ...
Can you help me with a CSS challenge? I need to create circles around elements on a webpage, but my code is not working perfectly. The width of the circle is off and I can't seem to center it properly. The width does not match the content (it is alw ...
My current setup includes a search box and a button that users click to execute the search. However, I am looking to enhance the functionality by allowing users to press "enter" instead of clicking the search button. How can I achieve this modification? B ...
I need assistance with implementing a feature that involves scrolling through different text blocks and corresponding images. Users should be able to select a specific text block and have the associated image on the right scroll into view, similar to a car ...
I aim to create a unique layout that appears as follows: [the button][world1][world2] The code provided is in HTML format: <div id='container'> <button id='my-button'>the button</button> <ul id='my-ul&a ...
I have included an <iframe> in my webpage to display videos from YouTube, but I am facing an issue with Mozilla Firefox. In Chrome, IE, and Edge, the videos display correctly using the following code: <iframe src="http://www.youtube.com/v/DNLh8p ...
My webpage features an img element with the following code: <img id=".."class=".." src="setPhoto/second_photo.php"> In the source attribute, I have linked to a .php file: <?php $id = $_SESSION['u_id']; $sql = "SELECT * FROM users WHER ...
I am currently navigating the world of Javascript, Jquery, and Ajax requests and I'm encountering a challenge with how my scripts are executing. My homepage contains a lengthy list of items (over 1200) that need to be displayed. Previously, I loaded ...
My first question here is about implementing the addtodo(todo) code. After trying it out successfully, I wanted to make it work when typing and pressing enter. However, despite attempting some other methods, I couldn't get it to work. I didn't re ...
My footer is causing overlap issues with the div above it on my mobile website. Here's a visual representation: Current view on my phone: https://i.stack.imgur.com/RpvWM.png Desired view: https://i.stack.imgur.com/KHVcm.png The code for the are ...
I'm looking to execute this function after a 5-second delay: $(document).ready(function() { $("#signInButton").trigger('click'); }); Your assistance is greatly appreciated. ...
Trying to display an array of objects (highcharts points) is giving me some trouble. Instead of the actual data, I'm seeing [object Object]. It seems that JSON.stringify() doesn't play well with HTML. util.inspect also doesn't work as expe ...
Within my setup, there are two forms. The first form contains a textarea, while the second form appears in a modal. Below is the code for form 1. <div> <textarea name="dynamic-content-unit" id="dynamic-content-unit" class="for ...
While utilizing MDL tooltips (), the tooltip typically displays just below the <div> it is linked to. I am aiming for the tooltip to show up to the right of the referenced element, rather than beneath it. My attempt to adjust the appearance in styl ...
Is there a way to implement a notification number badge using Ajax, similar to what Facebook does? I can't provide an image here, but most people are probably familiar with the concept. It's like when you sign into Facebook and see a small number ...
Seeking to display a large amount of data in an alert box, but only a portion is currently visible. The following text is all that can be seen: ["19467,1496257152583","19227,1496256651094","19469,1496257033968","17285, ...
The project I'm currently working on is located at zarwanhashem.com If you'd like to see my previous question along with the code, you can check it out here: Bootstrap one page website theme formatting problems Although the selected answer help ...
I've been working on achieving a layout similar to this, with the contenthover script in action: Mockup Draft Of Desired Look However, the result I'm getting is different from what I expected, it can be seen here. The images are not aligning co ...