I have this in HTML.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%; text-align: center;">mid<br>middle<br>middddle</td>
<td style="text-align: right;">right</td>
</tr>
</table>
Looks like so
------------------------------------------
| mid |
left | middle | right
| middddle |
------------------------------------------
But I want this
------------------------------------------
| mid |
left | middle | right
| middddle |
------------------------------------------
How can I get there with CSS??
EDIT: added with checkbox instead of simple text
Solutions with justify-content works like a charm – but with a checkbox the
seems to be ignored. I replaced for example the checkbox with a string cause I did not expect to have it behave different – I was wrong.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%;"><span style="display:flex; justify-content: center;"><input type="checkbox"/>mid<br><input type="checkbox"/>middle<br><input type="checkbox"/>middddle</span></td>
<td style="text-align: right;">right</td>
</tr>
</table>
>Solution :
The below code will help you with your requirement.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%; text-align: center;">
<span style="text-align: left; display: inline-block;">mid<br>middle<br>middddle</span>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>