Javascript 如何对齐按钮内图像中心的文本

我将一个html页面分为四个部分。我已经在里面创建了四个包含图像的按钮。我还希望文本显示在每个按钮的中心。但由于图像的原因，文本在按钮下方移动。请告诉我如何做到这一点

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
钮扣{
宽度：50%；
身高：50%；
浮动：左；
保证金：0；
填充：0；
光标：指针；
文本对齐：居中；
}
按钮式img{
宽度：100%；
身高：100%；
}
按钮：悬停{
不透明度：0.4；
}

本性
喜马拉雅山

使用

背景图像：url（'https://someurl.com');
而不是将图像放在按钮标记内

请参阅：
使用
背景图像：url（'https://someurl.com');
而不是将图像放在按钮标记内

参见：
2可能性：

1.）在文本中使用带有
位置：绝对
的元素

或

2.）将图像用作背景图像
2可能性：

1.）在文本中使用带有
位置：绝对
的元素

或

2.）将图像用作背景图像
如上所述，您可以使用背景图像而不是
img
元素。但在悬停时，
opacity:0.4
将同时应用于图像和文本。如果要在悬停时将文本保持在
opacity:1
，请将文本包装成一个跨距，并将其放置在
absolute
的中心位置，然后在悬停时仅将不透明度应用于
img
：

HTML:

示例：
如上所述，您可以使用背景图像而不是
img
元素。但在悬停时，
opacity:0.4
将同时应用于图像和文本。如果要在悬停时将文本保持在
opacity:1
，请将文本包装成一个跨距，并将其放置在
absolute
的中心位置，然后在悬停时仅将不透明度应用于
img
：

HTML:

示例：
您可以使用CSS属性
背景图像
为CSS属性设置图像背景，也可以使用
文本对齐
将文本居中：


html，
身体{
身高：100%；
保证金：0；
填充：0；
}
钮扣{
宽度：50%；
身高：50%；
浮动：左；
保证金：0；
填充：0；
光标：指针；
文本对齐：居中；
}
按钮：悬停{
不透明度：0.4；
}

本性
喜马拉雅山
您可以使用CSS属性
背景图像
为CSS属性设置图像背景，也可以使用
文本对齐
将文本居中：


html，
身体{
身高：100%；
保证金：0；
填充：0；
}
钮扣{
宽度：50%；
身高：50%；
浮动：左；
保证金：0；
填充：0；
光标：指针；
文本对齐：居中；
}
按钮：悬停{
不透明度：0.4；
}

本性
喜马拉雅山
你应该解释怎么做。你应该解释怎么做。
<button><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Himalaya</span></button>

button {
  width: 50%;
  height: 50%;
  float: left;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  position: relative;
}

button img {
  width: 100%;
  height: 100%;
}
button span {
   position: absolute;
   width: 100%;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   text-align: center;
}
button:hover img {
  opacity: 0.4;
}