html - テーブルセルの画像の中央の下にラジオボタンを配置する方法は?

Question

ラジオ ボタンと画像 (例: http://jsfiddle.net/FQbny/ ) を含むフォームがありますが、ラジオ ボタンを本の画像の横ではなく、中央の下に配置したいと考えています。

解決策を教えてもらえますか？どうも！

Answer 1

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

これを試して、

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

Answer 3

http://jsfiddle.net/ags4j/

順序（imgの後の入力）を変更し、2つをaで区切り、<br>tdにanを与えるだけですalign="center"

Answer 4

ちょっと今、あなたの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 5

どうぞ

デモ

コードは以下のとおりです。

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