Как выровнять по горизонтали иконку css?

У меня есть эта html-разметка, я хотел бы центрировать по горизонтали значок, который у меня есть в спрайте, у него есть 15% для значка anc 85% для класса info-data. Я хотел бы выровнять по центру значок.Как выровнять по горизонтали иконку css?

<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; 
}

Любая помощь будет оценена !!!! Спасибо!

источник

2016-02-23 user2112420

могли бы вы воспроизвести проблему в [скрипку] (https://jsfiddle.net/) .. – Lal

я не знаю, как приложить icon и bootstrap css – user2112420

bootstrap css можно связать, указав «внешние ресурсы» в скрипке .. и просто дать некоторый url изображения из сети ... – Lal

Ваш недостаток 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>

источник

2016-02-23 14:55:00 NiZa

Но не выровняйте красную рамку с 15% div :( – user2112420

Я понятия не имею, что вы имеете в виду, но я обновил свой ответ. Возможно, вы можете быть m руда ясно о вашей проблеме. – NiZa

да, я вижу это сейчас !!! позвольте мне проверить css, спасибо! – user2112420

Попробуйте vertical-align: middle; , что обычно делает трюк!

источник

2016-02-23 14:51:35 fauverism

hehhe funny, я уже пробовал, но не работал. – user2112420

Как выровнять по горизонтали иконку css?

ответ

Смежные вопросы