2015-05-14 113 views
1

我想制作一个图像的按钮和一些文本。我希望图像左对齐,文本要完全居中。文本应该以整个按钮的宽度为中心,而不是以图像的剩余宽度为中心。按钮与图像在左侧和文本中心对齐

我试图跨度,但没有成功

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

我也想避免的背景图像:网址,因为在移动恐怕该文本将在图像上

谢谢

+5

为什么你有一个锚标签内的按钮? – Andrew

+0

他说什么^^ ...另外,如果你想要在右边的图像,为什么把它添加到文本的左侧? – Aaron

+0

使用其中一个或另一个。 - 用你的HTML和CSS创建一个jsfiddle – Andrew

回答

5

这将适用于你。

button { 
 
    position: relative; 
 
    padding: 15px 40px; 
 
    text-align: center; 
 
} 
 
.btnimg { 
 
    position: absolute; 
 
    left: 6px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}
<button class="lightgray-btn rightbuttons"> 
 
    <img class="btnimg" src="http://lorempixel.com/output/food-q-c-27-24-8.jpg" alt="" /> 
 
    some text 
 
    </button>

+0

这很好,但是在移动视图中,当宽度文本接近按钮的宽度时,文本与图像重叠 – giorgionasis

+0

如果你增加填充'填充:15px 40px;'40px应该增加! – Aaron

0

你不应该使用一个按钮,一个简单的链接。相反,使用链接和样式。你可以不喜欢这样的例子:

.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"> 
 
\t <img src="//lorempicsum.com/futurama/50/50/2" alt="" /> 
 
    <span>Lorem ipsum</span> 
 
</a>

0

这里做的一个简单的方法:

.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> 
+0

他说:“我也想避免background-image:url”。 ;) –

+0

哈哈!哦耶。 编辑,谢谢。 – sanepete

+0

exactly.in移动文本将在图像上。 – giorgionasis

0

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