按鈕與圖像在左側和文本中心對齊

我想製作一個圖像的按鈕和一些文本。我希望圖像左對齊，文本要完全居中。文本應該以整個按鈕的寬度爲中心，而不是以圖像的剩餘寬度爲中心。按鈕與圖像在左側和文本中心對齊

我試圖跨度，但沒有成功

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

我也想避免的背景圖像：網址，因爲在移動恐怕該文本將在圖像上

謝謝

來源

2015-05-14 giorgionasis

爲什麼你有一個錨標籤內的按鈕？ – Andrew

他說什麼^^ ...另外，如果你想要在右邊的圖像，爲什麼把它添加到文本的左側？ – Aaron

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

這將適用於你。

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>

來源

2015-05-14 08:49:54 Aaron

這很好，但是在移動視圖中，當寬度文本接近按鈕的寬度時，文本與圖像重疊 – giorgionasis

如果你增加填充'填充：15px 40px;'40px應該增加！ – Aaron

你不應該使用一個按鈕，一個簡單的鏈接。相反，使用鏈接和樣式。你可以不喜歡這樣的例子：

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

來源

2015-05-14 08:50:28

這裏做的一個簡單的方法：

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

來源

2015-05-14 08:52:52 sanepete

他說：「我也想避免background-image：url」。 ;） –

哈哈！哦耶。編輯，謝謝。 – sanepete

exactly.in移動文本將在圖像上。 – giorgionasis

您可以指定你的背景圖像的最小寬度和應用與文本左側和右側的填充相同。這樣你的文字就不會與背景圖像重疊。

來源

2015-05-14 09:01:50 Ranjith

按鈕與圖像在左側和文本中心對齊

回答

相關問題