[英]bootstrap 3 icon button with svg text align
我在我的項目中使用引導程序 3 和一些 svg 圖標。 使用 svg 圖標的按鈕上的文本出現在按鈕的右下角而不是按鈕的中間。
按鈕代碼是
<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg>Previous</button>
按鈕 css 是
.btn {
background-color: #ff9800;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
從站點復制圖標按鈕的代碼。
您可以在沒有標准引導程序 3 styles 的情況下嘗試它,因為沒有 BS class 用於vertical-align: middle
<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg><span>Previous</span></button>
<!-- some extra span around the text -->
和
.btn {
background-color: #ff9800;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
.btn svg, .btn span {
display: inline-block;
vertical-align: middle;
}
只需添加display:grid; 在.btn{}內
.btn { background-color: #ff9800; border: none; color: white; padding: 12px 16px; font-size: 16px; cursor: pointer; display:grid; }
<button class="btn"><svg class="icon"><use xlink:href="#play-button-1"/></svg>Previous</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.