通过 CSS 对齐按钮的图像位置
Posted
技术标签:
【中文标题】通过 CSS 对齐按钮的图像位置【英文标题】：Align image position of button by CSS 【发布时间】：2020-05-31 07:10:37 【问题描述】：我有一个带有背景图像和大于图像宽度的文本的按钮。 怎么把图片放在文字中间
<!DOCTYPE html>
<html>
<head>
<style>
.button
background: url('http://127.0.0.1/pics/item/c1763.png') no-repeat;
background-size: 100% 100%;
border: none;
color: black;
font-size: 16px;
width:60px;
height:60px;
padding-top:60px;
white-space: nowrap;
background-position: center center;
display: flex;
</style>
</head>
<body>
<button class="button">Button text test</button>
</body>
</html>Button image
【问题讨论】：
尝试背景尺寸：包含 感谢您的回复，但对图像对齐没有任何影响 【参考方案1】：希望对您有所帮助。
.button
background: url('https://i.stack.imgur.com/GxHaN.jpg') no-repeat;
background-size: 100% 100%;
border: none;
color: black;
font-size: 16px;
width: 60px;
height: 60px;
white-space: nowrap;
background-position: center center;
display: flex;
<button class="button">Button text test</button>【讨论】：
感谢您的回复，但是按钮左侧仍然出现图片 更改按钮宽度。现在有宽度：60px; 感谢您的指导这是最终的解决方案将按钮的宽度更改为文字宽度，并将图片宽度设置为实际大小【参考方案2】：最终的解决方案是确定图片的实际宽度并为文本指定按钮的宽度
.button2
background-color: transparent;
background-image: url('http://127.0.0.1:25005/pics/item/c1763.png');
background-size: 60px 60px;
background-repeat: no-repeat;
border: none;
font-size: 16px;
height: 60px;
width: 150px;
text-align: center;
padding-top: 60px;
white-space:nowrap;
background-position: center top;
【讨论】：
以上是关于通过 CSS 对齐按钮的图像位置的主要内容，如果未能解决你的问题，请参考以下文章