Question

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

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

Answer 1

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

在单选按钮行上（＆lt; td＆gt; ），使其样式为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/

只需更改顺序（图片后面的输入）并将两者分开<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

你去吧

DEMO

代码如下：

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

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

5 个答案: