为什么我不能设置按钮内的文本样式？答案

【问题标题】：Why can I not style the text inside the button?为什么我不能设置按钮内的文本样式？
【发布时间】：2019-01-13 22:52:51
【问题描述】：

这是我的按钮。我的按钮没有居中，我似乎无法编辑里面的文字。

其他帖子建议在按钮的内容周围放置一个跨度，我这样做了，但它似乎不起作用。我尝试将字母更改为粉红色只是为了看看它是否会做任何事情，但它没有。据推测，这也是我可以对按钮内的位置感到不安的地方，不是吗？这是我的代码。

<Button bgColor="#609D64" style={{ marginTop: '-17px' }}>
    <span style={{ color: 'pink' }}>START
    </span>
</Button>

【问题讨论】：

你在使用模板系统吗？

标签： html css button

【解决方案1】：

您不需要跨度。尝试使用 flexbox。

我已经添加了样式

display: flex;
justify-content: center;
align-items: center;

这应该使文本垂直和水平居中。

<Button style={{ display: flex; justify-content: center; align-items: center; text-align: center; color: pink; background: #609D64; }}>START</Button>

顺便说一句，除非你真的必须这样做，否则内联样式并不好。此外，如果此代码不能解决您的问题，请显示 html 按钮输出的内容，因为它可能是渲染的组件导致了问题。

【讨论】：

但请记住，旧版浏览器不支持 flexbox。
好点@D.Schaller。这同样可以通过使用 text-align center & padding 来实现
但是 safari 是否可以在 safari 上使用 flex items，如果可以的话？
使用供应商前缀stackoverflow.com/questions/24899943/…

【解决方案2】：

它应该适合你。

<Button style="margin-top:-17px; background-color:#609D64; text-align:center">
<span style="color:pink">START
</span>
</Button>

【讨论】：

是的，它可以在跨度上使用 css 像按钮跨度 { color:pink;字体大小：55px； }

【解决方案3】：

这是一个使用 flex 的解决方案。有一个inline-flex 声明——

button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6px 12px;
  border: 1px solid #CDCDCD;
  background: #FFF;
  color: hotpink;
}

&lt;p&gt;&lt;button&gt;hello world&lt;/button&gt; Welcome to the water planet!&lt;/p&gt;

在将flex 混合到inline-block 布局中时，这是一个特别重要的细节。

【讨论】：