圖標和文字使用最小寬度的按鈕

我有一個簡單的Html按鈕，頂部有一個圖標，下面還有一段描述。圖標和文字使用最小寬度的按鈕

<div class="mybtn"> 
    <div><img src="someimage.png"></div> 
    <div>Button description</div> 
</div>

是否有可能使用CSS，以最小化該按鈕的寬度，所以該描述包，如果它是比圖像更寬？描述也應該在圖像下方水平居中。

結果應該是這樣的：https://jsfiddle.net/c3trL3ha/但是沒有定義「mybtn」的寬度。正如你所看到的，「mybtn」儘可能的窄。

2017-05-08 stefan

嘗試使用你的''mybtn' MAX-width'。 – Huelfe

您可以在.mybtn > div申請width和word-wrap: break-word，像這樣：

.mybtn > div { 
    width: 32px; 
    word-wrap: break-word; 
} 
.mybtn img { 
    width: 100%; 
    height: auto; 
}

注：如評論所說，它不是在用戶體驗（UX）方面認爲，作爲一個字將分成多行。

2017-05-08 07:46:27 Raptor

圖片是32x32像素。我看不出什麼定義的圖像寬度解決。按鈕應儘可能窄。 – stefan

檢查我更新的答案。你應該考慮使用'word-wrap：break-word'。但是，在用戶體驗（UX）方面沒有建議，因爲一個詞將被分成多行。 – Raptor

我不想分手的話。按鈕的寬度應該是：Max（圖像寬度，最長字長）。你可以在我的更新回答中看到它應該是什麼樣子。每個按鈕的文本當然會有所不同。 – stefan

檢查this小提琴

CSS

.mybtn{ 
    width: 200px; 
} 
.mybtn div { 
    word-wrap: break-word; 
    text-align: center; 
    width: auto; 
}

2017-05-08 07:56:18

回答