前端 - css如何实现图标和文字的“绝对对齐”呢？

Question

前端实现图标和文字对齐有什么解决方法？我的“绝对对齐”的意思是不管是安卓设备和ios设备看着都是对齐的，最好也能实现pc上的对齐。

demo：https://jsfiddle.net/nzfbzxw6/

虽然我通过设置

vertical-align: -3%;

实现的对齐（在chrome上看着好好的），如果我要在手机设备上安卓，就要是另一个数值。
ios可能又要设个数值（而且不同的苹果机型也不一样）。

对这种问题有什么更好的解决方法吗？

-------------------------- 一个调皮的分割线 ----------------------------------------

各位前辈的方法我都试了一下，发现在安卓手机上都不好使，图片居中是没有问题的，但是文字（尤其是小于12px下的）却无法居中，这可能是安卓手机bug吧...

（第一个box盒子，第二个display：inline-block，第三个background center）

Answer 1

No spaces should appear between elements. You need to use margin to achieve distance.

Answer 2

If this is just for your problem, you can remove <img src="http://s1.mi.com/m/images/20151028/top-x.png"> and replace it directly with the string × or ×.

Answer 3

As mentioned in the previous answer, it needs to be set to inline-block.
For specific principles, I recommend Zhang Xinxu’s
CSS in-depth understanding of vertical-align

http://www.imooc.com/learn/542

Answer 4

Generally use background and positioning methods. Vertical-align is difficult to control, and it has something to do with the font.

Answer 5

For example, with four attributes, you can use this method to insert icons into text

Answer 6

The element alignment of inline-block is more troublesome. So if conditions permit, I will choose to use flex for centering.

Answer 7

<p class="box">

<i></i>
<span>测试</span>
<span>普通门票</span>

</p>

i,span{

display:inline-block;
vertical-align: middle;

}

Answer 8

Use a p to wrap the image and text, and just align them in the p

Answer 9

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;

Answer 10

Sometimes the offset is very disgusting1px, and then I manually adjust margin:-1px and so on, and how I feel the text or the elements of inline are always a little bit inexplicablepadding Existence