<div class="col-md-4">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
Как я могу отобразить элемент h4 справа от значка и выровнять по вертикали? Должен ли я плавать влево span?Вертикальный выравнивающий текст после значка шрифта
Один из способов будет использовать inline-block дисплей и средний выровнять это - смотрите в демо ниже:
.wrapper > * {
display: inline-block;
vertical-align: middle;
}
.blue {
color: blue;
}
.white {
color: white;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-4 wrapper">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>Мне нравится ваше решение, я полагаю, он более совместим с IE. – Jumpa
Использование CSS Flexbox. Сделайте родителя <div>, который обернет в него значок и текст (в моем случае его icon-holder) и сделайте его контейнером flexbox, используя display: flex.
Посмотри на ниже фрагменте коды:
.icon-holder {
display: flex; /* Flex Container */
align-items: center; /* Vertically Align Content */
}
.blue {
color: #33b5e5;
}
span {
color: #fff;
}
h4 {
padding-left: 5px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-4">
<div class="icon-holder">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
</div>Надеется, что это помогает!
Вы можете использовать display: flex и может сделать что-то, как показано ниже:
.col-md-4 {
display: flex;
align-items: center;
}
.blue {
color: blue
}
.white {
color: white;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-4 wrapper">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>Я добавил его, но не вертикально выровнен ... может быть, бутстрап? – Jumpa
@Jumpa добавить 'align-items: center;' родителям, это должно сделать трюк. – pradeep1991singh
Спасибо за ваше время. Мне нужно быть совместимым с IE8: http://caniuse.com/#feat=flexbox – Jumpa
Вы можете просто использовать 'дисплей: flex' для родительского элемента. – pradeep1991singh
Я добавил его в div, но h4 не выровнен по вертикали. – Jumpa
Он должен, пожалуйста, поместите свой код в некоторый jsfiddle, может быть, какой-то другой css противоречит 'display: flex'. – pradeep1991singh