Rezert Posted March 4, 2009 Share Posted March 4, 2009 So, I decided to do a little science project using some simple HTML and PHP as I'm 13 and got bored. So I was doing this and realized I didn't know how to center the radio button below the image. Here's a link to see what I've basically got so far: <html> <head> <title> Names to Faces </title> </head> <body> <p>Names to Faces (NtF) is a Science Project that was created to see if people see certain names as looking a certain way. We will give you 15 names and 4 pictures for each name for you to choose which of those pictures matches the name.</p> <p><strong>Question 1</strong>: Who is named Mike?</p> <div name="answer1div"> <input type="radio" name="answer1" value="a"><img src="mike1.jpeg" /></input> <input type="radio" name="answer1" value="b"><img src="mike2.jpeg" /></input> <input type="radio" name="answer1" value="c"><img src="mike3.jpeg" /></input> <input type="radio" name="answer1" value="d"><img src="mike4.jpeg" /></input> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/147836-simple-question/ Share on other sites More sharing options...
Dinosoles Posted March 4, 2009 Share Posted March 4, 2009 Hi, Do you know the exact width of the images? If so I would approach like this... <div class="answer1div"> <img src="mike1.jpeg" alt="mike 1" /> <img src="mike2.jpeg" alt="mike 2" /> <img src="mike3.jpeg" alt="mike 3" /> <img src="mike4.jpeg" alt="mike 4" /> <input type="radio" name="answer1" value="a" /> <input type="radio" name="answer2" value="b" /> <input type="radio" name="answer3" value="c" /> <input type="radio" name="answer4" value="d" /> </div> And then use css to position the images and the radios... div.answer1div img { float: left; } div.answer1div input { float: left; margin-left: 20px; } Then adjust the margin on the inputs to the correct value based on the width of the images. Hope this helps. Link to comment https://forums.phpfreaks.com/topic/147836-simple-question/#findComment-776116 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.