Javascript 当按钮调整大小时，如何将文本动态居中？

调整视口大小时，按钮的文本开始离开按钮区域。如果添加display:flex、justify content:center以及align items:center，则整个按钮都会移动，并且与列表不一致

.textList{
边际上限：2vh；
边缘底部：2vh；
背景：线性梯度（向左，#743ad5，#d53a9d）；
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
字号：2vh；
字号：700；
}
.btn{
文字装饰：无；
宽度：4.5vw；
高度：3.5vh；
背景：线性梯度（向左，#743ad5，#d53a9d）；
-webkit文本填充颜色：白色；
颜色：白色；
字体系列：“Lato”，无衬线；
边界半径：1vw；
字号：700；
字体大小：1.75vh；
位置：绝对位置；
右：0；
垂直对齐：中间对齐；
文本对齐：居中；
}
#上市区{
位置：绝对位置；
顶部：25vh；
宽度：25vw；
高度：35vh；
边框样式：实心；
边框宽度：0.75vw；
边界图像源：线性渐变（向左，#743ad5，#d53a9d）；
边界图像切片：3；
背景：白色；
字号：2vh；
}

删除
编辑

调整视口大小时，按钮的文本开始离开该区域 按一下按钮

您已经使用

text align:center

将文本居中放置在按钮内。离开按钮边界的文本不是居中问题，而是溢出问题。正如我常说的，你不能把10加仑的水放在一个5加仑的桶里。您应该在按钮上添加一个

min width

，这样它就不会小于其内容。您还应该考虑将<代码>最小宽度添加到SyListFale中，以防止<代码> LI>代码>及其内容溢出框。

.textList{
边际上限：2vh；
边缘底部：2vh；
背景：线性梯度（向左，#743ad5，#d53a9d）；
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
字号：2vh；
字号：700；
}
.btn{
文字装饰：无；
宽度：4.5vw；
min width:50px；/*有多种方法，标准方法是使用文本对齐：居中；但这仅适用于水平轴，如果您希望在水平和垂直方向上居中文本，无论按钮大小和形状如何，都可以使用flex定位，如按钮示例2所示

示例：

.btn{背景：ff0000；颜色：白色；字体大小：20px；填充：8px 32px；宽度：100%；文本对齐：居中；边距：20px自动；最大宽度：600px；高度：10vh；}
.btn2{背景：#ff0000；颜色：白色；字体大小：20px；填充：8px 32px；宽度：100%；显示：柔性；对齐内容：中心；对齐项目：中心；边距：20px自动；最大宽度：600px；高度：10vh}
查看更多信息
查看更多
text align:center；@AdrianBrand他已经在使用它了。这不是问题，按钮的大小是。请看我的答案。居中不是问题。您也没有显示问题所在的
按钮的示例。这个示例以最简单的形式显示了所需的内容，即原始问题由于不必要的代码太多，因此OP应该能够找出如何用标记将div包装成button@GibsonFX这个例子并没有解决OP所面临的实际问题，这是一个溢出问题，而不是一个居中问题。而且，添加
a
并不会产生任何效果g一个
按钮
，使其成为
锚定
。一个
按钮
或
输入类型=“按钮”
使某个东西成为一个按钮。你只要看一下OP的代码，就可以看到他已经在使用
文本对齐：居中
。如果OP遵循了指导原则，并以最小的重复性示例呈现了代码，那么回答的人可能会阅读代码，如果没有，那么这是OP错误地识别了t这个问题。@GibsonFX OP是否能做得更好并不重要。这个答案实际上并没有解决一个明确的问题：当我调整视口的大小时，我的按钮文本开始离开按钮区域。而且OP的代码并不像你想象的那么复杂或臃肿。对不起，你没有这不是问题的答案，它甚至没有使用与OP在其尝试中使用的代码类似的代码。无法想象为什么对问题的正确解释和有效解决方案投反对票。