How to align text at center over image inside button

Question

I have divided an html page into four sections. I have created four buttons inside it which contain images. I also want text to be displayed at the center of each button. But due to the images the texts are moving below the button. Please tell me how to achieve this.

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>

score 1 · Answer 1 · answered Aug 14 '20 at 15:02

1

Use background-image: url('https://someurl.com'); instead of placing the image inside the button tag.

See: How to add background image for input type="button"?

answered Aug 14 '20 at 15:02

Wardy

11
1
1

score 1 · Answer 2 · answered Aug 14 '20 at 15:23

You can use the CSS property background-image to set the background of the image for a css property, and you can use your text-align to center the text:

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>

score 0 · Answer 3 · answered Aug 14 '20 at 15:02

0

2 possibiities:

1.) Use an element with position: absolute for the text

or

2.) Use the images as background-images

answered Aug 14 '20 at 15:02

Johannes

64,305
18
73
130

You should explain how. – Someone Anonymous Aug 16 '20 at 19:03

score 0 · Answer 4 · answered Aug 14 '20 at 15:18

As mentioned above, you could use background-image instead of img elements. But on hover, opacity:0.4 will apply to both image and text. If you want to keep the text at opacity:1 on hover, wrap up the text in a span and position it absolute center it, and apply opacity on hover to img only:

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

Example: https://jsfiddle.net/1q879w3p/

How to align text at center over image inside button

4 Answers4