0

как можно выровнять оба spana по центру родительского блока. Отступами совсем не хочет

HTML

<div class="favorites_button_block" id="favorites_button_block">
            <img id="favorites_buy" src="image.png">
            <div id="rectangle_favorites">
                <span id="favorites_buy_price" class="favorites_buy_price">num</span>
                <span>USD</span>
            </div>        
        </div>

css

   .favorites_button_block {
        margin-top: -21px;
        float: right;
    }
    #favorites_buy {
        float: left;
        cursor: pointer;
    }
    #rectangle_favorites {
        width: 110px;
        height: 39px;
        background: #FFEBCD;
        float: left;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
    }
    #favorites_buy_price {
        margin: 9px;
        text-align: middle;

}

1 ответ 1

2

Добавляем к span свойство display: inline-block;, а родителю text-align: center;. Если еще нужно выровнять по вертикали, тогда еще к span добавляем line-height: 39px;.

.favorites_button_block {
        margin-top: -21px;
        float: right;
    }
    #favorites_buy {
        float: left;
        cursor: pointer;
    }
    #rectangle_favorites {
        width: 110px;
        height: 39px;
        background: #FFEBCD;
        float: left;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
        text-align: center;
    }
    #favorites_buy_price {
        margin: 9px;
        text-align: middle;

}

#rectangle_favorites > span {
  display: inine-block;
  line-height: 39px;
}
<div class="favorites_button_block" id="favorites_button_block">
  <img id="favorites_buy" src="image.png">
  <div id="rectangle_favorites">
    <span id="favorites_buy_price" class="favorites_buy_price">num</span>
    <span>USD</span>
  </div>        
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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