我有这个 html 标记,我想将我在 sprite 中的图标水平居中,它有 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;
}
任何帮助将不胜感激!!!! 谢谢!
最佳答案
您缺少 float:left
样式。我会这样做
* {
box-sizing: border-box;
}
.mf-item {
background-color: #ffffff;
display: inline-block;
height: auto;
margin-left: 0;
min-height: 30px;
width:100%;
}
.ico {
display: inline-block;
height: 30px;
margin: 0 auto;
padding-right: 5px;
text-align: center;
vertical-align: middle;
width: 15%;
float:left;
}
.info-data {
border-bottom: 1px solid #0f8ccd;
display: inline-block;
line-height: 30px;
margin: 0;
width: 85%;
float:left;
}
.icon-theme {
background-position: 0 -90px;
height: 30px;
width: 23px;
display:block;
margin:0 auto;
background-color:red; //your background image imaging
}
<div class="col-xs-12 mf-item">
<div class="ico"><span class="icon-theme"></span></div>
<div class="info-data">Theme</div>
</div>
关于html - 如何使用CSS水平对齐图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35580374/