Горизонтальное выравнивание по частям элемента

Question

Я пытаюсь центрировать символ под другим элементом, где верхний элемент находится на одной линии с другими элементами, все из которых сосредоточены внутри контейнера, а нижний элемент имеет другие элементы его права, такие, как это:

сочетание радио-кнопки и текста по центру внутри контейнера, а стрелка, как предполагается, в центре под кнопкой радио (но не то, что текст является также там). Образцовое изображение создается с жесткими пространствами, которое на самом деле работает на удивление хорошо и масштабируется отлично, но кажется глупым способом сделать это. Любые мысли о «правильном» способе сделать это?

Приведенная выше таблица приходит от:

body { 
 
    font-family: arial; 
 
} 
 
table, 
 
td { 
 
    border: 1px solid #aaaaaa; 
 
    border-collapse: collapse; 
 
    text-align: center; 
 
    padding: 5px; 
 
}

<table> 
 
    <tr> 
 
    <td align='center' width='33.3333333333333%'> 
 
     <input type='radio' name='r1' value='1'>1</td> 
 
    <td align='center' width='33.3333333333333%'> 
 
     <input type='radio' name='r2' value='2'>2</td> 
 
    <td align='center' width='33.3333333333333%'> 
 
     <input type='radio' name='r3' value='3'>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td align='center' width='33.3333333333333%'> 
 
     <div style='position:relative;top:-15px;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span> 
 
     </div> 
 
    </td> 
 
    <td align='center' width='33.3333333333333%'>&nbsp;</td> 
 
    <td align='center' width='33.3333333333333%'>&nbsp;</td> 
 
    </tr> 
 
</table>

Answer 1

Вы можете использовать относительный ДИВ и левый атрибут выстраиваться стрелку, как вы хотите.

Обратите внимание, что, как указано в комментариях, выравнивание устарело и не служит цели из того, что я мог видеть.

Также обратите внимание, что я немного изменил html и переместил некоторый повторный код в классы в CSS, чтобы сделать этот пример немного более удобным для чтения, но единственными дополнениями были класс с одним столбцом (ширина 100%), и левый атрибут в контейнер стрелок.

Протестировано только на Chrome.

body { 
 
    font-family: arial; 
 
} 
 
table, 
 
td { 
 
    border: 1px solid #aaaaaa; 
 
    border-collapse: collapse; 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 
.three-column { 
 
    width: 33%; 
 
} 
 
.one-column { 
 
    width: 100%; 
 
} 
 
.arrow-container { 
 
    position:relative; 
 
    top:-15px; 
 
    left:14px; 
 
}

Responsive: (check in new window) 
 
<table class="one-column"> 
 
    <tr class="one-column"> 
 
    <td class="three-column"> 
 
     <input type='radio' name='r1' value='1'>1</td> 
 
    <td class="three-column"> 
 
     <input type='radio' name='r2' value='2'>2</td> 
 
    <td class="three-column"> 
 
     <input type='radio' name='r3' value='3'>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="three-column"> 
 
     <div class="arrow-container"> 
 
     <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span> 
 
     </div> 
 
    </td> 
 
    <td class="three-column"> 
 
     <div class="arrow-container"> 
 
     <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span> 
 
     </div> 
 
    </td> 
 
    <td class="three-column"> 
 
     <div class="arrow-container"> 
 
     <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
Non-responsive: (no one-column class) 
 
<table> 
 
    <tr> 
 
    <td class="three-column"> 
 
     <input type='radio' name='r1' value='1'>1</td> 
 
    <td class="three-column"> 
 
     <input type='radio' name='r2' value='2'>2</td> 
 
    <td class="three-column"> 
 
     <input type='radio' name='r3' value='3'>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="three-column"> 
 
     <div class="arrow-container"> 
 
     <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span> 
 
     </div> 
 
    </td> 
 
    <td class="three-column"> 
 
     <div class="arrow-container"> 
 
     <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span> 
 
     </div> 
 
    </td> 
 
    <td class="three-column"> 
 
     <div class="arrow-container"> 
 
     <span style='font-size:18pt;font-weight:bold;'>&#8627;</span><span style='padding:1px;border:2px solid black'><b style='font-size:8pt;'>20.</b></span> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>