gpt4 book ai didi

html - 如何使用CSS水平对齐图标?

转载 作者:行者123 更新时间:2023-11-28 06:21:09 25 4
gpt4 key购买 nike

我有这个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com