html - css和html中的图像和单选按钮对齐问题

Question

我目前正在使用此代码：

<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>

它给了我像 http://i.stack.imgur.com/ppjjF.png这样的解决方案， 但我希望它像这样 http://i.stack.imgur.com/sIDX1.png

我从最近几个小时就开始尝试它，但我找不到任何解决方案。请帮助我

Answer 1

用这个

<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

尝试这样的事情

    <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>

检查 Jsfiddle 输出：http: //jsfiddle.net/8ZJP5/