在火狐中浮动和text-align冲突的问题

公司没有前段，于是写页面样式也得亲自上阵，刚开始比较烦躁，写得多了也渐渐熟练起来。自以为小有所成，然而各个浏览器的兼容问题又浮上水面。这次碰到的是火狐的问题

<div style="padding-top: 25px;text-align:center;">
	<span id="previous" class="leftArrow" style="float: left;margin-left: 60px;">
	</span>
	<span id="naviPage" data-page="0" data-total="0" style="font-size: 18px;color: #b3b3b3;">
	0/0
	</span>
	<span id="next" class="rightArrow" style="float: right;margin-right: 60px;">
	</span>
</div>

谷歌和ie中显示是这样的

火狐中是这样的

实际上就是一个方块里三个元素，左右元素分别左浮动和右浮动，然后外层的div加上text-align:center元素，使中间的span居中，但是火狐中，左浮动元素影响了span的居中位置，挤到了右边，而右边的浮动元素甚至直接被span给挤出这行元素了。

按理说行内元素或者display:inline-block属性的方块不会挤占浮动元素的位置，火狐中的行内元素却跟block元素更像。

初步的解决方法把中间的元素也改成浮动，然后调整margin-left,不过因为要适应不同的页面大小，所有外层的div宽度是不固定的，这个办法行不通。

另一种方法是左右浮动元素使用绝对定位position:absolute;外面的div使用相对定位position:relative;这个方法可行。

<div style="padding-top: 25px;position:relative;">
	<span id="previous" class="leftArrow" style="position:absolute ;left: 60px;">
	</span>
	<span id="naviPage" data-page="0" data-total="0" style="font-size: 18px;color: #b3b3b3;">
	0/0</span>
	<span id="next" class="rightArrow" style="position:absolute;right: 60px;"></span>
</div>

后来想想其实这样写更加合理，左右箭头相当于背景，实际上应该脱离整个流，浮动元素还是会影响到其他元素，所以并不合适

以上。