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>