顶部固定搜索栏布局，如何处理button、images和input的布局？

Question

如图所示：

左右两侧的按钮采用什么布局更加合理一些？
目前的方案是：
第一种(为button添加padding和背景图，来实现图标的添加)：

<header>
    <p class="head_top">
        <button>全部</button>
        <label for="search"></label>
        <input type="text" id="search" placeholder="请输入客户姓名">
        <button>导出</button>
    </p>
</header>

第二种（将图标作为i的背景来填充）：

    <p class="head_top">
        <button>全部<i></i></button>
        <label for="search"></label>
        <input type="text" id="search" placeholder="请输入客户姓名">
        <button>导出<i></i></button>
    </p>

本来是想用字体图标的，可是设计师已经出图了，无奈只能用图来实现左右两测的图标~
希望各种同仁，大仙提供更好，更合理的布局或者思路~o(￣︶￣)o

Answer 1

你可以仿照字体图片的方式, 使用 i 来展示, 不过是使用背景来展示图片

或者 直接用 img 就行

Answer 2

flex布局或者是图片浮动，垂直居中往往更喜欢flex布局

Answer 3

弹性布局比较好用

Answer 4

这个问题厉害了，左右两侧按钮格式是一样的，都是文字+图片，我在看你给出的解决方案之前，我一般写法都是直接使用img标签去显示这个图标，然后文字使用span或者什么去装，两者外面套一个div，为了省事，垂直居中就使用的楼上几个答主说的，flex布局完事。
但是看了你的答案之后，觉得使用flex布局不如使用你的方法，你提供的两种方式都行，如果非要选择的话，第一种方法没有引入额外的DOM元素，只通过css就解决了问题，从性能上来说更好。但是代码可读性上来说，第二种优先。