How to horizontally align label with radio button?

[ShenaniganCoder]

How do I horizontally align the label for a radio button with the radio button?

http://imgur.com/a/ntLUD

<form>
						<fieldset>
							<a href="http://www.google.com/webhp?safe=vss">
								<img src="http://www.brucetelecom.com/images/google.gif"/>
							</a>
							<br>
							<legend align="left">Google Search:</legend>
							<input id="searchbar" type="text">
							<br />
							<input id="search" type="submit">
							<br />
							<label for="radio1">Internet</label>
							<input type="radio" id="radio1" value="radio1">
						</fieldset>
					</form>

 

#dummy {
	margin-left: 23px;
	table-layout: fixed;
	text-align: center;
}
#dummy td {
	border: 1px solid black;
}
#searchbar {
	width: 162px;
	border: 1px solid #999999;
	size: 15;
	display: block;
}
#search {
	display: block;
}
#radio1 {
	display: block;
}

 

[vorticalbox]

tried just writing it after the input rather than trying to apply a label?

[ShenaniganCoder]

32 minutes ago, vorticalbox said:

tried just writing it after the input rather than trying to apply a label?

Yup, doesn't horizontally align it

 

 

[Mr_KoKa]

Your radio1 element is block, so it takes whole line. Try now remove display: block; from #radio1

[dannytech357]

Just add the following:

input[type=radio] {
	margin-top: -1px;
	vertical-align: middle;
}

It sets the radio to the middle of the label, and forces it up using

margin-top

If this doesn't work, try adding 

height: 100%;

to the radio, sometimes it doesn't resize. I also tried the strategy of putting the radio into the label, which works too.

Examples: https://jsfiddle.net/k5zujc6u/14/

Edited August 30, 2016 by dannytech357
Accidentally wrote width instead of height