Question

我正在尝试制作一个带有图像的按钮和一些文字。我希望图像在左边对齐，文本完全居中。文本应该以整个按钮的宽度为中心，而不是导致图像的剩余宽度。

我尝试了跨度但没有成功

<a href=#><button class="lightgray-btn rightbuttons"><span class="demoimage"><img class="btnimg" src="..." alt="" /></span><span class="demotext">"some text</span></button></a>

我也想避免使用background-image：url，因为在移动版中我担心文字会出现在图片上

谢谢

Answer 1

这对你有用。

＆＃13;

button {
  position: relative;
  padding: 15px 40px;
  text-align: center;
}
.btnimg {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

  <button class="lightgray-btn rightbuttons">
    <img class="btnimg" src="http://lorempixel.com/output/food-q-c-27-24-8.jpg" alt="" />
    some text
  </button>

＆＃13;

Answer 2

您不应该使用按钮进行简单链接。相反，使用链接并设置样式。你可以这样做，例如：

.btn {
  position: relative;
  display: block;
  width: 200px;
  height: 50px;
  padding: 6px;
  text-decoration: none;
  background-color: #af0c0c;
  color: #fff;
}
.btn img {
  float: left;
}
.btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<a href="" class="btn">
	<img src="//lorempicsum.com/futurama/50/50/2" alt="" />
    <span>Lorem ipsum</span>
</a>

Answer 3

这是一种更简单的方法：

.myawesomebutton img
{
 float:left;
}
.myawesomebutton span
{
 position:absolute;
 top:50%;
 left:50%;
 -webkit-transform:translate(-50%, -50%);
 transform:translate(-50%, -50%);
}

<a href="#" class="myawesomebutton">
    <img src="myawesomeimages/myawesomeimage.png"/>
    <span>My awesome button</span>
</a>

Answer 4

您可以为背景图像指定最小宽度，并在文本的左侧和右侧应用相同的填充。这样你的文字就不会与背景图像重叠。

按钮左侧的图像和文本中心对齐

4 个答案: