我正在努力使用flexbox容器连同bootstrap 4将我的元素水平居中对齐。
这是我到目前为止所拥有的：
<div class="d-flex flex-column align-items-center">
<img class="rounded-circle" height="50">
<a href="https://some.external.link" target="_blank">
Follow me
<i class="fa fa-external-link "/>
</a>
</div>
如果锚点的文本没有换行，则此方法效果很好。但是，如果确实如此，链接文本将不再居中。相反，它会向左排列。
我已经尝试了容器上的所有可能的组合，以及对图像和锚点使用项目包装器。链接文本换行时仍然存在问题。
你需要添加text-center同样，所以文本中a将居中。
原因是，当文本变得太宽时，a元素，以及align-items-center使元素居中，而不是其内容居中。
所以发生的事情是a增长直到达到其父级的宽度，然后文本将换行，左对齐，因为这是文本/内容的默认设置。
The text-center可以添加到div的类列表（因为它是由a），或者在a本身（在第二个示例中完成）。
在下面的两个示例中，我添加了边框，以便您可以看到差异。
堆栈片段
a {
border: 1px dashed red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center text-center">
<img class="rounded-circle" height="50">
<a href="https://some.external.link" target="_blank">
Follow me
<i class="fa fa-external-link "/>
</a>
</div>
<div class="d-flex flex-column align-items-center">
<img class="rounded-circle" height="50">
<a href="https://some.external.link" target="_blank" class="text-center">
Follow me Follow me Follow me Follow me Follow me Follow me Follow me Follow me Follow me Follow me Follow me Follow me <i class="fa fa-external-link "/>
</a>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
