如何在按钮内的图像中心对齐文本答案

【问题标题】：How to align text at center over image inside button如何在按钮内的图像中心对齐文本
【发布时间】：2020-08-14 14:59:01
【问题描述】：

我将一个 html 页面分为四个部分。我在其中创建了四个包含图像的按钮。我还希望在每个按钮的中心显示文本。但是由于图像的原因，文本正在按钮下方移动。请告诉我如何实现这一目标。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

button img {
  width: 100%;
  height: 100%;
}

button:hover {
  opacity: 0.4;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Nature</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">Himalaya</button>

  <button><img src="https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""></button>

  <button><img src="https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""></button>

  <button><img src="https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""></button>

  <script src="script.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

使用background-image: url('https://someurl.com'); 而不是将图像放在按钮标签内。

见：How to add background image for input type="button"?

【讨论】：

【解决方案2】：

您可以使用 CSS 属性 background-image 为 css 属性设置图像的背景，您可以使用 text-align 使文本居中：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

button:hover {
  opacity: 0.4;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Nature</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <button style="background-image: url('https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80')">Himalaya</button>

  <button style="background-image: url('https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80')"></button>

  <button style="background-image: url('https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></button>

  <button style="background-image: url('https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"></button>

  <script src="script.js"></script>
</body>

【讨论】：

【解决方案3】：

2 种可能性：

1.) 使用带有position: absolute 的元素作为文本

或

2.) 使用图像作为背景图像

【讨论】：

你应该解释一下。

【解决方案4】：

如上所述，您可以使用 background-image 代替 img 元素。但是在悬停时，opacity:0.4 将同时应用于图像和文本。如果您想在悬停时将文本保留在opacity:1，请将文本包裹在一个跨度中并将其定位为absolute 居中，并在悬停时将不透明度应用于img：

HTML：

<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>

CSS：

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

示例：https://jsfiddle.net/1q879w3p/

【讨论】：