[英]vertically alignment of a text inside a button with an image
在此CodePen中,您可以看到一個<button>
其中帶有圖像和文本( <span>
)。 問題是文本多行顯示。 文本的第二行不是緊靠第一行,並且會出現一個很大的空格(計算<img>
的高度)。
我的代碼( 在CodePen上 ):
button { width: 300px; } img { vertical-align: middle; }
<button> <img src="http://lorempixel.com/50/50/" /> <span> Some Text some text some text some text some text some text some text some text</span> </button>
您可以通過flexbox使用以下解決方案:
* { margin:0; padding:0; box-sizing:border-box; } button { align-items: center; display: flex; padding: 3px; justify-content: center; width: 300px; } button img { flex-shrink: 0; margin-right: 10px; }
<button> <img src="https://lorempixel.com/50/50/" alt=""> <span>Some Text Some Text Some Text Some Text Some Text Some Text Some Text</span> </button> <button> <img src="https://lorempixel.com/50/50/" alt=""> <span>Some Text</span> </button> <button> <img src="https://lorempixel.com/50/50/" alt=""> </button>
你可以嘗試一下嗎https://codepen.io/anon/pen/qVKagg
button { width: 300px; display: flex; text-align:left; } img { vertical-align: middle; margin-right:5px; }
<button> <img src="http://lorempixel.com/50/50/" /> <span> Some Text some text some text some text some text some text some text some text</span> </button>
嘗試這樣做。 也有其他方法,但是這一方法很簡單。
button { width: 300px; } button img { float:left; width:20%; } button span { float:right; width:80%; }
<button> <img src="http://lorempixel.com/50/50/" /> <span> Some Text some text some text some text some text some text some text some text</span> </button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.