'HTML-Table: center by longest word

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


Solution 1:[1]

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>

Solution 2:[2]

You can assign to the middle td display:flex; and wrap your middle td content in a div container. Like that:

.m-td {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.m-td div{
  text-align: left;
}
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td class="m-td">
  <div>
    mid<br>middle<br>middddle
  </div>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>

Update

Thank you for hint @NikeshKp. For some reasons try to avoid use flexbox in the table.

Don't use flex property on tables. If used on mailers it will not work in some email service providers like outlook.

Here the answer without flex. 

.m-td {
  text-align: center;
}

.m-td div{
  text-align: left; 
  display: inline-block;
}
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td class="m-td">
  <div>
    mid<br>middle<br>middddle
  </div>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>

Solution 3:[3]

You can achieve it like this. Hope that how you want it to look.

<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%;">
<span style="display:flex; justify-content:center">
mid<br>middle<br>middddle
</span>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nikesh Kp
Solution 2
Solution 3 Ankit Saxena

Related Questions