CSS和HTML中的图像和单选按钮对齐问题

Question

i am currently using this code:

<div style="width:200px; height:300px;">
<img src="./imgs/Apeiron-Island-Hotel.jpg" style="width:200px; height:200px;"/> <input align="middle" type="radio" name="venue"/></div>
<div style="width:200px; height:300px;">
<img src="./imgs/Apeiron-Island-Hotel.jpg" style="width:200px; height:200px;"/> <input align="middle" type="radio" name="venue"/></div>
<div style="width:200px; height:300px;">
<img src="./imgs/Apeiron-Island-Hotel.jpg" style="width:200px; height:200px;"/> <input align="middle" type="radio" name="venue"/></div>

it is giving me solution like http://i.stack.imgur.com/ppjjF.png but i want it to be like this http://i.stack.imgur.com/sIDX1.png

i am trying it since last few hours but i cant find any solution. kindly help me

Answer 1

Use this

<style type="text/css">
.auto-style1 {
text-align: center;
display:inline-block
}

</style>

<div class="auto-style1" style="width: 200px; height: 300px; float: left">
    <img src="./imgs/Apeiron-Island-Hotel.jpg" style="width: 200px; height: 200px;">
    <input align="middle" name="venue" type="radio" ></div>
<div class="auto-style1" style="width: 200px; height: 300px; float: left">
    <img src="./imgs/Apeiron-Island-Hotel.jpg" style="width: 200px; height: 200px; float: left">
    <input align="middle" name="venue" type="radio" ></div>
<div class="auto-style1" style="width: 200px; height: 300px;">
    <img src="./imgs/Apeiron-Island-Hotel.jpg" style="width: 200px; height: 200px; float: left">
    <input align="middle" name="venue" type="radio" ></div>

Answer 2

try something like this

    <div style="width:200px; height:300px; float:left; padding:0px 10px;" align="center">
    <img src="test.png" style="width:200px; height:200px;" /> <input align="middle" type="radio" name="venue"/></div>
    <div style="width:200px; height:300px; float:left; padding:0px 10px;" align="center">
    <img src="test.png" style="width:200px; height:200px;"/> <input align="middle" type="radio" name="venue"/></div>
    <div style="width:200px; height:300px; float:left; padding:0px 10px;" align="center">
    <img src="test.png" style="width:200px; height:200px;"/> <input align="middle" type="radio" name="venue"/></div>

Check Jsfiddle output : http://jsfiddle.net/8ZJP5/