HTML/CSS：どのラジオボタンがチェックされているdivを中心にするか

Question

私は親divと3つの子divを持っています。これらの子divの1つをブラウザウィンドウの中央に配置したいと思います。

<div id="parent" style="overflow: auto; white-space: nowrap; width: 100%"> 
    <div id="round1" style="display: inline-block"><input type="radio" name="opt" id="opt1" />1</div> 
    <div id="round2" style="display: inline-block"><input type="radio" name="opt" id="opt2" />2</div> 
    <div id="round3" style="display: inline-block"><input type="radio" name="opt" id="opt3" />3</div> 
</div> 

ラジオボタンがチェックされているdivを水平方向に中央に揃えたい場合は、どのような種類のCSSコードが必要ですか？今回はJavaScript/jQueryが許可されていません。

ラジオボタンのOPT1がチェックされている場合、画面は次のようになります。

---------------------- 
|     | 
|  (*)1(*)2(*)3| 
|     | 
---------------------- 

ラジオボタンのOPT2がチェックされている場合、画面は次のようになります。

---------------------- 
|     | 
| (*)1(*)2(*)3 | 
|     | 
---------------------- 

ラジオボタンOPT3た場合画面は次のように表示されます。

---------------------- 
|     | 
|(*)1(*)2(*)3  | 
|     | 
---------------------- 

（*）= radiobutトン

Answer 1

は、あなたはスタイルが上から下に適用され、親の内側とCSSでの入力を持っているが、この

<input id="input0"> 
<div id="parent0">123</div> 
<input id="input1"> 
<div id="parent1">123</div> 
<input id="input2"> 
<div id="parent2">123</div> 

ようなものになるだろうtext-align

#input0:checked ~ #parent0{ 
    text-align: right; /*center | left*/ 
} 
#input1:checked ~ #parent1{ 
    text-align: right; /*center | left*/ 
} 
#input2:checked ~ #parent2{ 
    text-align: right; /*center | left*/ 
} 

htmlで行うことができます。 JSでのみ可能です