My table has cells that can contain both icons and text, with the icons appearing to the left of the text. There are different alignment scenarios to consider:
- Only an icon is present: The icon should be centered
- Only text is present: The text should be left aligned
- Both icons and text are present: Both the icon and text should be left aligned
I had the idea of using a flexbox within the table-cell, setting justify-content: center;, and adding margin-right: auto; to the text div for achieving various alignments.
If there is text, the auto margin will shift everything to the left.
If not, the icons will be centered due to the justify-content style.
You can view my codepen example here.
.flexbox {
display: flex;
flex-direction: row;
justify-content: center;
border: 2px solid black;
width: 300px;
height: 17px;
}
.icon {
height: 17px;
width: 17px;
background-color: red;
}
.text {
margin-right: auto;
}<div class="flexbox">
<div class="icon"></div>
<div class="text">asdf</div>
</div>This method works well in Chrome, but I encountered issues with IE 11 where the right auto margin isn't applied correctly. I'm trying to understand this behavior and find a workaround.
Additional Information
It seems like IE 11 calculates auto margins first, aligns flex items without considering these margins, and then applies the margins as best as it can afterwards.
For instance, when justify-content: flex-end; is used with margin-left: auto; on the text div, the icon gets right aligned within the flexbox while the text extends beyond the flexbox boundaries by nearly the entire width (which should have been the auto margin).