display：flex with text和tag inside删除空格

Question

我正在开发某些CMS的广告管理解决方案。我为管理员提供了几种风格的位置来定位广告。管理员将输入广告代码（HTML格式：adsense脚本，横幅广告或简单文字）。为了让管理员尽可能轻松，我尝试通过包装广告代码来自动居中：

<div style="display: flex; justify-content: center;">
</div>

除了这个之外，它在所有情况下都能完美运行：

<div style="display: flex; justify-content: center;">
    Hosting provided by <a href="http://foobar">FooBar Hosting</a> and me
</div>

产生这个：

注意“by FooBar”和“Hosting and”之间缺少空格。这是为什么？有没有办法用CSS修复此问题，但保留其他情况的居中功能？

Answer 1

您可以为标签添加边距。

＆＃13;

＆＃13;

a {
  margin: 0 3px;
}

＆＃13;

<div style="display: flex; justify-content: center;">
    Hosting provided by <a href="http://foobar">FooBar Hosting</a> and me
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

是否需要以任何理由弯曲？

<div style="text-align: center;">
  Hosting provided by <a href="http://foobar">FooBar Hosting</a> and me
</div>

Answer 3

应用 display：block; 或 display：inline; 而不是display：flex;