Html 如何将图标与css水平对齐？

我有这个html标记，我想水平居中的一个图标，我在一个精灵，它有15%的图标和85%的信息数据类。我想将图标居中对齐

<div class="col-xs-12 mf-item">
<div class="ico icon-theme"></div>
<div class="info-data">Theme</div>
</div>

.mf-item {
    background-color: #ffffff;
    display: inline-block;
    height: auto;
    margin-left: 0;
    min-height: 30px;
}

.ico {
    display: inline-block;
    line-height: 30px;
    margin: 0 auto;
    padding-right: 5px;
    text-align: center;
    vertical-align: middle;
    width: 15%;
}

.info-data {
    border-bottom: 1px solid #0f8ccd;
    display: inline-block;
    line-height: 30px;
    margin: 0;
    width: 85%;
}

.icon-theme {
    background-position: 0 -90px;
    height: 30px;
    width: 23px;
}

主题
.mf项目{
背景色：#ffffff；
显示：内联块；
高度：自动；
左边距：0；
最小高度：30px；
}
.ico{
显示：内联块；
线高：30px；
保证金：0自动；
右侧填充：5px；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：15%；
}
.info数据{
边框底部：1px实心#0f8ccd；
显示：内联块；
线高：30px；
保证金：0；
宽度：85%；
}
.图标主题{
背景位置：0-90px；
高度：30px；
宽度：23px；
}

任何帮助都将不胜感激！！！！ 谢谢

试试看

垂直对齐：中间对齐
这通常能奏效
 您的
浮动：左
样式缺失。我会这样做


*{
框大小：边框框；
}
.mf项目{
背景色：#ffffff；
显示：内联块；
高度：自动；
左边距：0；
最小高度：30px；
宽度：100%；
}
.ico{
显示：内联块；
高度：30px；
保证金：0自动；
右侧填充：5px；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：15%；
浮动：左；
}
.info数据{
边框底部：1px实心#0f8ccd；
显示：内联块；
线高：30px；
保证金：0；
宽度：85%；
浮动：左；
}
.图标主题{
背景位置：0-90px；
高度：30px；
宽度：23px；
显示：块；
保证金：0自动；
背景颜色：红色；//您的背景图像成像
}

主题
能否请您在a.中重现该问题。我不知道如何附加图标，引导cssbootstrap css可以通过在fiddle中指定“外部资源”链接。。只需给出一些网络图像的url…但没有将红色框与15%的div对齐：（我不知道你的确切意思，但我更新了我的答案。也许你可以更清楚地了解你的问题。你做了什么更改？在类图标主题中添加了
margin:0 auto；
。）请注意，我更改了你的html。我用类ico在您的div中添加了一个span标记<代码>