html - 如何在表格单元格的图像中心下方放置单选按钮？

Question

我有一个带有单选按钮和图像的表单（例如： http: //jsfiddle.net/FQbny/），但我希望单选按钮位于书籍图像的中心下方 - 而不是它旁边。

你能给我一些解决方案吗？谢谢！

Answer 1

在一行中添加图像，然后在下一行中添加单选按钮，冲洗并重复。

在单选按钮行（<td>）上，使其样式设置为 text-align:center;

就像是：

<table>
    <tr>
        <td>
            <img src="http://derivativeofln.com/nagrody/howtomeasure.jpg" />
        </td>
        <td>
            <img src="http://derivativeofln.com/nagrody/competingonanalytics.jpg" />
        </td>
    </tr>
    <tr>
        <td style="text-align:center">
            <input type="radio" name="radio-207" value="howtomeasure">
        </td>
        <td style="text-align:center">
            <input type="radio" name="radio-207" value="competingonanalytics">
        </td>
    </tr>
</table>

这里的代码工作：http: //jsfiddle.net/TJGeG/

Answer 2

http://jsfiddle.net/ags4j/

只需更改顺序（img 之后的输入）并将两者分开 a<br>并给 td 一个align="center"

Answer 3

嘿，现在像这样更改为您的 html

HTML

<table>
    <tr>
        <td>
            <div class="parent">
        <input type="radio" name="radio-207" value="howtomeasure" style="botton:0px">
        <img src="http://derivativeofln.com/nagrody/howtomeasure.jpg"  style="top:0px" />
            </div>
        </td>

        <td>
            <div class="parent">
            <input type="radio" name="radio-207" value="competingonanalytics">
            <img src="http://derivativeofln.com/nagrody/competingonanalytics.jpg" />
            </div></td>
    </tr>

<tr>
    <td>
<div class="parent">        <input type="radio" name="radio-207" value="likeablesocial">
        <img src="http://derivativeofln.com/nagrody/likeablesocialmedia.jpg" />
        </div></td>

    <td>
        <div class="parent">
        <input type="radio" name="radio-207" value="oldrules">
        <img src="http://derivativeofln.com/nagrody/oldrules.jpg" />
        </div> </td>
    </tr>
</table>

CSS

.parent{
position:relative;
    z-index:2;
}

.parent input{
position:absolute;
    top:50%;
    left:50%;
    z-index:5;
}

现场演示 http://jsfiddle.net/FQbny/3/

left top现在根据您的要求更改位置

Answer 4

干得好

演示

代码如下：

<table border="0" style="padding:10px;">
    <tr><td><img src="http://derivativeofln.com/nagrody/howtomeasure.jpg"  style="top:0px" /></td><td> <img src="http://derivativeofln.com/nagrody/competingonanalytics.jpg" /></td></tr>
    <tr><td align="center"><input type="radio" name="radio-207" value="howtomeasure" style="botton:0px"> </td><td align="center"><input type="radio" name="radio-207" value="competingonanalytics"> </td></tr>
<tr>
  <td><img src="http://derivativeofln.com/nagrody/likeablesocialmedia.jpg" /> </td>
  <td><img src="http://derivativeofln.com/nagrody/oldrules.jpg" /></td>
</tr>
<tr><td  align="center"><input type="radio" name="radio-207" value="likeablesocial"> </td><td  align="center"><input type="radio" name="radio-207" value="oldrules"></td></tr>
</table>

Answer 5

试试这个，

<table cellspace="0" cellpadding="0" border="0">
    <tr>
        <td>
            <img src="http://derivativeofln.com/nagrody/howtomeasure.jpg" style="top: 0px" />
        </td>
        <td>
            <img src="http://derivativeofln.com/nagrody/competingonanalytics.jpg" />
        </td>
    </tr>
    <tr>
        <td align="center">
            <input type="radio" name="radio-207" value="howtomeasure" style="botton: 0px">
        </td>
        <td align="center">
            <input type="radio" name="radio-207" value="competingonanalytics">
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://derivativeofln.com/nagrody/likeablesocialmedia.jpg" />
        </td>
        <td>
            <img src="http://derivativeofln.com/nagrody/oldrules.jpg" />
        </td>
    </tr>
    <tr>
        <td align="center">
            <input type="radio" name="radio-207" value="likeablesocial">
        </td>
        <td align="center">
            <input type="radio" name="radio-207" value="oldrules">
        </td>
    </tr>
</table>