为什么不能在按钮内设置文本样式？

Question

这是我的按钮。我的按钮没有居中，而且似乎无法编辑其中的文本。

其他帖子建议我在按钮的内容周围加上一个跨度，但这似乎不起作用。我尝试将字母更改为粉红色，以查看它是否可以执行任何操作，但没有。大概在这里，我也会对按钮内的位置感到烦躁，不是吗？这是我的代码。

@startuml
if (color it) then (yes)
  #Orange: Colored;
else (no)
   : Not Colored;
endif;
@enduml

Answer 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 Button输出的内容，因为它可能是呈现的组件导致了问题。

Answer 2

它应该为您工作。

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

Answer 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;
}

<p><button>hello world</button> Welcome to the water planet!</p>

这是将flex混合到inline-block布局中时要了解的特别重要的细节。