我有一个表格,其中一个单元格可以包含许多图标以及文本。如果存在图标,则它们显示在文本的左侧。有几种可能的对齐情况:
我认为通过使用justify-content: center;
将{_1}}中的所有内容包装到表格单元格中,然后将margin-right: auto;
应用于文本div,我可以完成此操作和其他更复杂的对齐。
如果有文字,自动边距会将所有内容推到左侧。
如果没有,justify-content
样式将使图标居中。
Here is a codepen包含我的方法。
.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>
此方法适用于Chrome,但在IE 11中未正确应用正确的自动边距。我想知道为什么,以及如何绕过它。
额外信息
似乎IE 11首先计算自动边距,然后对齐柔性项目而不考虑这些边距,最后尽可能地应用边距。
我相信这是因为,当在flexbox上设置justify-content: flex-end;
并且文本div具有margin-left: auto;
时,图标在flexbox中右对齐,而文本被推到flexbox的边界之外几乎整个flexbox的宽度(关于汽车保证金应该是什么)。
答案 0 :(得分:0)
这种去除对齐内容的工作对我来说不起作用。如果您在IE11中查看此示例,您将看到:Codepen example
.wrapper {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
.item {
margin: auto;
width: 50px;
height: 50px;
background-color: red;
}