0

Нужно выровнять текст по средине. Нужно что бы он всегда был по средине, на всех разрешениях. Как посоветуете сделать? введите сюда описание изображения

<div class="rent-of-dedicated-server-backups-list col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="left-side backups-list-3"><img src="img/baseico-ico.png"></div>
                    <div class="text text-left"><span>Восстановление данных</span></div>
                    <div class="text text-left">Вы сможете быстро восстанавливать данные</div>
            </div>

SASS

.rent-of-dedicated-server-backups-list{
                        padding: 0;
                        margin-bottom: 15px;
                        border-radius: 10px;
                        background: #ffffff;
                        box-shadow: 2.3px 4.5px 9px 0 rgba(0, 0, 0, 0.08);
                        .left-side{
                            float: left;
                            color: #ffffff;
                            min-height: 64px;
                            font-weight: bold;
                            font-size: 17px;
                            padding: 0 26px;
                            border-bottom-left-radius: 10px;
                            border-top-left-radius: 10px;
                            &> img{
                                margin-top: 18px;
                                width: 28px;
                            }

                        }
                        .text{
                            font-size: 14px;
                            width: 75%;
                            float: left;
                            margin-top: 3px;
                            font-weight: normal;
                            padding-left: 14px;
                            line-height: normal;
                            &> span{
                               font-size: 15px;
                               font-weight: bold;
                               color: #448ccb;
                            }
                            &:before{
                                content: '';
                                display: block;
                                position: absolute;
                                top: -2px;
                                left: 61px;
                                border-bottom: 66px solid #ffffff;
                                border-left: 20px solid transparent;
                            }
                        }
                    }
1
  • Вводите CSS или меняйте метку. Это не CSS.
    – user207618
    23 мая 2018 в 14:57

2 ответа 2

0

Можете регулировать паддингами отступы сверху и снизу или же обернуть 2 блока с текстом в один и задать ему:

.имя этого блока {
position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

и обязательно:

.rent-of-dedicated-server-backups-list {
position:relative;
}

Тогда текст станет четко по центру блока, а отступ слева уже сами можете отрегулировать.

0

Вот пример на флексах

    <div class="wrap">
  <div class="wrap__line">
    <div class="box">
      <div class="box__img">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3ga5J8nVeqXu5bNPv4UfU73nlNUNGvbPuTb8em_--FU9vyZL92w" alt="">
      </div>
      <div class="box__text">
        <div class="text">Блок №1</div>
        <div class="text"><span>Описание первого блока</span></div>
      </div>
    </div>
  </div>
  <div class="wrap__line">
    <div class="box">
      <div class="box__img">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3ga5J8nVeqXu5bNPv4UfU73nlNUNGvbPuTb8em_--FU9vyZL92w" alt="">
      </div>
      <div class="box__text">
        <div class="text">Блок №2</div>
        <div class="text"><span>Описание второго блока</span></div>
      </div>
    </div>
  </div>
  <div class="wrap__line">
    <div class="box">
      <div class="box__img">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3ga5J8nVeqXu5bNPv4UfU73nlNUNGvbPuTb8em_--FU9vyZL92w" alt="">
      </div>
      <div class="box__text">
        <div class="text">Блок №3</div>
        <div class="text"><span>Описание третьего блока</span></div>
      </div>
    </div>
  </div>  
</div>


.wrap {
  display: flex;
  flex-direction: column;

  &__line {
    padding: 20px 0;
    border-bottom: 1px solid #000;
  }
}

.box {
  display: flex;
  align-items: center;

  &__img {
    margin: 0 10px 0 0;

    img{
    width: 30px;
    height: 30px;
    }  
  }
}

.text {
  font-size: 15px;
  font-weight: bold;

  span {
    font-weight: normal;
  }
}

Ваш ответ

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

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