在這種情況下，垂直對齊會將圖像和文本分成兩行

-1

還不太確定此問題的原因是什麼。我有這個HTML：在這種情況下，垂直對齊會將圖像和文本分成兩行

<button id="AddJudgeBt" type="button" class="positive block"> 
    <span>Add </span> 
    <span class="icon arrows-add icon-add-remove"></span> 
</button>

我不能粘貼所有的CSS在這裏，因爲它傳播在所有不同的文件和太長。簡單的想法是兩個跨度都有display：inline-block和一個圖標。

生成的按鈕幾乎看起來像這樣。正如你所看到的，img和按鈕被分成兩行。我嘗試了按鈕的邊距，填充，位置和寬度，它們都不是問題。最後，我嘗試從頂部到頂部更改垂直對齊方式，問題得到解決！

但是我仍然不清楚導致問題的原因。我試着用這個小提琴：https://jsfiddle.net/stqgdfcz/1/但我無法重現發生了什麼。

有人可以讓我知道什麼可能是潛在的問題？

來源

2016-01-20 Lance Shi

添加第一跨度顯示：塊; –

最有可能的是，爲按鈕填充左右值會強制圖標在下一行上流動。 – KrisD

@LaljiTadhani試過。它不起作用 –

這可能是因爲圖像和文本的浮動方式不同。嘗試將圖像和文本浮動到左側，這將使它們在同一行中對齊，並且不要忘記隨後清除浮動。你可以做到這一點。

img.del { 
float:left 
} 

.astext{ 
float:left 
}

來源

2016-01-20 06:37:07

嘗試應用寬度（可能是50％）和浮動：左爲兩個SPAN，然後調整邊距或填充按照設計對齊。

來源

2016-01-20 06:41:35

HTML

<button><span class="astext">Next</span><span class="aspic"><img src="image/delete1.png" class="del" style="width:10px; height:10px;" /></span></button>

CSS

img.del { 

} 
.astext { 
text-align: left; 
    margin-left: 10%; 
} 
.aspic 
{ 
cursor: pointer; 
margin-left: 10px; 
margin-right: 5%; 
} 
span { 
display:inline-block; 
} 

button { 
    box-sizing:border-box; 
    width: 80px; 
    display:block; 
}

https://jsfiddle.net/stqgdfcz/6/

來源

2016-01-20 06:49:04

在這種情況下，垂直對齊會將圖像和文本分成兩行

回答

相關問題