如何在按钮内的图像中心对齐文本
[英]How to align text at center over image inside button
问题描述
我将 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>
4 个解决方案
解决方案1
1 2020-08-14 15:02:50
使用background-image: url('https://someurl.com'); 而不是将图像放在按钮标签内。
解决方案2
1 2020-08-14 15:23:58
您可以使用 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
0 2020-08-14 15:02:59
2 种可能性：
1.) 使用带有position: absolute文本
或者
2.) 使用图像作为背景图像
解决方案4
0 2020-08-14 15:18:26
如上所述，您可以使用 background-image 代替img元素。 但是在 hover 上， opacity:0.4将适用于图像和文本。 如果您想在 hover 上将文本保持为opacity:1 ，请将文本包裹在一个跨度中，并将 position absolute居中，并将img上的不透明度应用于 im：
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;
}
如何在JavaScript Image Slider中居中对齐图像
[英]how to center align an image inside the JavaScript Image Slider
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.