0

center-block и text-center не работает. Нужно разместить иконки по центру:

<div class="jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-md-1">
    <div class="social twitter">
        <a href="#" target="_blank"><i class="fa fa-twitter fa-2x center-block"></i></a>
    </div>
    <div class="social instagram">
        <a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
    </div>
    <div class="social facebook">
        <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
    </div>
    <div class="social vk">
        <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
    </div>
    </div>
    </div>
    </div>
    </div>

CSS:

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.social a{
    text-align:center;
    width:46px;
    height:46px;
    float:left;
    background:#fff;
    border:1px solid #ccc;
    box-shadow:0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius:46px;
    margin:0 10px 10px 0;
    padding:6px;
    color:#000;
}

2 ответа 2

1

добавь с css

<div class="jumbotron">
  <div class="container">
      <div class="row">
          <div class="col-md-1 flex-center">
            <div class="social twitter">
                <a href="#" target="_blank"><i class="fa fa-twitter fa-2x center-block"></i></a>
            </div>
            <div class="social instagram">
                <a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
            </div>
            <div class="social facebook">
                <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
            </div>
           <div class="social vk">
                <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
            </div>
        </div>
    </div>
  </div>
</div>

<style>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.social a{
    text-align:center;
    width:46px;
    height:46px;
    float:left;
    background:#fff;
    border:1px solid #ccc;
    box-shadow:0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius:46px;
    margin:0 10px 10px 0;
    padding:6px;
    color:#000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.flex-center{
  display: flex;
  justify-content: center;
}
<style>
5
  • не работает нужно чтобы они были в один ряд, а если прописать inline-flex, то они становятся слева, как исправить?
    – Oleksandr
    20 сен 2018 в 17:37
  • м.б. не так скопировал? jsfiddle.net/19nptusj/5 - все ровно
    –  DemoGosha
    20 сен 2018 в 18:00
  • мне нужно по центру страницы, а они просто слева
    – Oleksandr
    21 сен 2018 в 16:12
  • надо было сразу так и говорить - jsfiddle.net/49awptg1 . Рекомендую ознакомится с flex -habr.com/post/313938
    –  DemoGosha
    21 сен 2018 в 16:50
  • спасибо работает, я нашел ещё один метод может он и кривоват но работает, через col-md-4
    – Oleksandr
    21 сен 2018 в 18:01
1

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.social a{
    text-align:center;
    width:46px;
    height:46px;
    float:left;
    background:#fff;
    border:1px solid #ccc;
    box-shadow:0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius:46px;
    margin:0 10px 10px 0;
    padding:6px;
    color:#000;
    display: flex;
    text-decoration: none;
    justify-content: center;
}

.social i {align-self: center;}
<div class="jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-md-1">
    <div class="social twitter">
        <a href="#" target="_blank"><i class="fa fa-twitter fa-2x center-block"></i></a>
    </div>
    <div class="social instagram">
        <a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
    </div>
    <div class="social facebook">
        <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
    </div>
    <div class="social vk">
        <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
    </div>
    </div>
    </div>
    </div>
    </div>

Попробуйте так флексом

3
  • они становятся в столбик
    – Oleksandr
    21 сен 2018 в 16:13
  • Вы нажали выполнить код кнопку? Всё там нормально.
    – Nilsan
    21 сен 2018 в 16:14
  • мне нужно выравнять по центру страницы, а они слева, подскажите как их поставить по центру?
    – Oleksandr
    21 сен 2018 в 16:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.