Positioning the radio tag in perfect alignment with the adjacent image

I am struggling to align my radio buttons with the image placed beside them.

The image has a width of 260 pixels and a height of 88 pixels, while the radio buttons are enclosed within a table.

Although I attempted the following CSS code, it did not produce the desired result: 

form input[type="radio"]{
    vertical-align: middle;
    margin-right: 10px;

}

Here is the structure of the table: 

<table border="0" cellpadding="0" align="center">
    <tr>

        <td height="90">    
            <input type="radio" value="">
            <img src="/images.gif" width="260" height="88" />
         </td>
    </tr>
</table>
cssimagehtml-table

Answer №1

Make sure to include vertical-align: middle for the image element as well. Also, because the radio button is not wrapped in a <form> tag, you can simply use input[type="radio"] to style the radio button with CSS.

input[type="radio"] {
    vertical-align: middle;
    margin-right: 10px;
    margin-top: 0px;

}

#image {
    vertical-align: middle;
}
<table border="0" cellpadding="0" align="center">
    <tr>

        <td height="90">    
            <input type="radio" value="">
            <img src="http://placehold.it/350x150" id="image" width="260" height="88" />
         </td>
    </tr>
</table>

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

I am experiencing an issue where my JavaScript code does not redirect users to the next page even

I'm experiencing an issue with this code where it opens another webpage while leaving the login screen active. I've tried multiple ways to redirect it, such as window.location.href and window.location.replace, but nothing seems to be working. Ide ...

javascriptjqueryhtmlcss

What could be causing the bullet not to appear in Internet Explorer 6

It is visible in Firefox, but not in IE (specifically IE6). <style type="text/css"> li { list-style-type:disc; } </style> <div style="margin: 2px auto 15px; padding: 5px 0px; width: 480px; text-align: center;"> <ul style="margin: 0; ...

cssinternet-explorerhtml-lists

What is the best way to design a bookmarklet that can overlay an HTML/div layer and apply CSS styles from an

Is there a way to incorporate a bookmarklet that can bring in a new layer/div with additional HTML and CSS from an external file, overlaying it on the current page? If anyone has an example of a bookmarklet that achieves this, would you be willing to shar ...

javascriptjquerycsshtmlbookmarklet

The vertical alignment of the wrapper div does not support multiple lines of text

I am having trouble achieving vertical alignment (middle) for a div with 2 lines of text. I can do it with one line, but not two. I want one of the lines to be formatted like a h2 heading, and the other like a regular paragraph. I understand that I could s ...

htmlcss

What are the best ways to integrate jQuery into a React application?

I am in the process of developing a responsive menu for my react app, but I'm facing some challenges as a newcomer to react. In order to achieve the desired functionality, I am trying to incorporate jQuery for menu toggling. However, when I attempt to ...

jqueryhtmlcssreactjs

Using the onclick event with an image created through PHP code

I am currently in the process of developing a dynamic image represented as a graph displaying the number of documents generated each day. This interactive image is being created using PHP, and I aim to improve user engagement by enabling them to click on t ...

phpjavascripthtmlimageonclick

What is the process for having HTML open a hyperlink in a new window?

I am facing the following issue: <p class="bigfont"> <img width="4%" src="images/Youtube.png" class="float-left"/ > <a href="\\OC2-RMGFS\Public\Safety\runhidefight-eng.wmv" target="_blank" title="Response to ...

javascripthtmlcss

How can I save a PNG file to the Filesystem using Cordova/Phonegap?

Question regarding handling mp3 and wav files. I've established an express.js server to send files using the following method: res.sendFile('someImage.png', {root: './images'}); On the client-side, I receive the image using: va ...

imagecordovaexpressbinary-datafileapi

Why are my video files exhibiting inconsistent behavior?

I've encountered an issue with the code on my website where I'm trying to display a 40-second video. The video converter I used seems to have added extra video types, which may be causing the problem. Here's what the HTML code looks like: ...

csshtmlvideoautoplay

Set tab navigation widget with a fixed height

I am struggling with setting a fixed height for my tabs widget so that when I add more content, it will display a scrollbar instead of expanding endlessly. I have checked the CSS and JS files but cannot figure it out. It is important for me to contain this ...

javascriptjqueryhtmlcssjquery-ui

Update Bootstrap Vue to change the colors of the breadcrumbs

Struggling to customize the look of bootstrap-vue breadcrumbs? I've attempted various combinations of classes and styles in the breadcrumb and breadcrumb-item tags, but to no avail. Every time, I end up with blue or grey text on a light grey backgroun ...

cssbootstrap-4bootstrap-vue

Implementing a list using display: inline-block without any specified order

Currently, I am immersed in a project that involves simulating an input using HTML and CSS. This input should be capable of executing a function like: my_cool_function(param0, param1, param2, param3). To accomplish this, I have constructed an unordered lis ...

javascriptjqueryhtmlcss

The image for our "About Us" section is not loading

I'm facing a challenge with displaying an image in the about us section of my website. Even though the image is present in the folder, it doesn't show up on the site. I've tried various methods such as moving the picture to different locatio ...

htmlcss

Creating a versatile design using a combination of grids, HTML tables, and media queries to ensure

When it comes to developing a responsive website, which method is superior: utilizing grid systems, employing media queries, or relying on HTML tables? ...

htmlcssresponsive-designgridmedia-queries

Photos on Display are Misaligned

I'm currently in the process of developing a responsive photo gallery based on this tutorial. Within my project, there exists a component known as MemoryList which is defined as shown below: import React from 'react'; import _ from 'lo ...

cssreactjs

Check if there are any child nodes before executing the RemoveChild JavaScript function to avoid any errors

function delete(){ let k = document.getElementsByClassName('row'); for(let i=0; i<k.length; i++) { if(k[i].hasChildNodes()){ k[i].removeChild(k[i].childNodes[2]); } } } <div id="table"> <div class="row"& ...

javascripthtml-tableremovechildchild-nodes

Ways to avoid overflow of dynamically added div element?

Currently, I am facing an issue while dynamically appending div elements with the .magnet class to my page. These elements end up overflowing the container boundaries and I am struggling to find a solution for this problem. If anyone could check out my j ...

javascriptjqueryhtmlcss

Browser switch dependent on operating system

Recently, a guest raised concerns about a DIV element covering the content of the page. There is an issue with a popup that is supposed to only appear when the mouse hovers over its container: <td class="ref" id="myContainer"> <div><a ...

csswindowsinternet-explorer

Choose the radio button upon clicking away from the input field

Currently, I have a standard Bootstrap 4 accordion that contains a radio button. Here is the code snippet: <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> ...

htmlcsstwitter-bootstrap

Tips on utilizing CSS selectors with jQuery?

Is there a way to use jQuery to call a function on a web page load that will set the text "Hello world!" on all labels with the CSS class "hello"? I'm curious to learn more about how this works. Can anyone provide some insight? ...

jqueryhtmlcss