在这种情况下，垂直对齐将图像和文本分成两行

Question

仍然不太确定这个问题的原因是什么。我有这个HTML：

String URL = "http://54.152.108.131/iphone111/getParentInput?child_id=6272&date=1/19/2016";

我无法粘贴所有css，因为它在所有不同的文件中传播太长。简短的想法是两个跨度都显示：内联块和图标一个有图像。

生成的按钮看起来很像这样。如您所见，img和按钮分为两行。我尝试了按钮的边距，填充，位置和宽度，但没有一个是问题。最后，我尝试将垂直对齐从顶部更改为文本顶部，问题得到解决！

但我仍然不清楚导致这个问题的原因。我试着用这个小提琴：https://jsfiddle.net/stqgdfcz/1/但我无法重现发生的事情。

有人能告诉我可能存在的潜在问题吗？

Answer 1

这可能是因为图像和文本的浮动方式不同。尝试将图像和文本浮动到左侧，这将使它们在同一行中对齐，并且不要忘记在之后清除浮动。 你可以这样做。

img.del {
float:left
}

.astext{
float:left
}

Answer 2

尝试为两个SPAN应用宽度（可能为50％）和float：left，然后根据设计调整边距或填充以对齐。

Answer 3

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/