0

Есть шапка сайта

#pageHeader {
    grid-area: header;
    width: 100%;
    /*
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
}

#pageHeader .headerinsides {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        /*align-items: center;*/
}

.icon {
        align-self: center;
        /*padding-left: 74px;*/
        /*padding-right: 74px;*/
}

#pageHeader .labelforicon {
        padding-left: 10px;
        /*padding-right: auto;*/
        /*width: 1200px;*/
        align-self: center;
        /*flex: 34px;*/
        /*border-bottom: 2.5px dotted black;*/
        font: 18px, PT Sans,sans-serif;
        /*white-space: pre;*/
}

.flexcitylink {
        /*margin-left: 74px;*/
        display: flex;
        flex: 60px;
        font: 18px, PT Sans,sans-serif;
}

/*
.headerparamswrapper {
    display: flex;
    margin-left: auto;
}
*/

.intermediatespace {
        margin-left: auto;
        flex: 30%;
}

.telephonenumber {
        margin-left: auto;
        flex: 30%;
}

.addressandworkschedule {
        margin-left: auto;
        flex: 20%;
}

.payment {
        margin-left: auto;
        flex: 10%;
}
<header id="pageHeader">
<span class="headerinsides">
        <span class="flexcitylinkwrapper">
        <a href="#" class="flexcitylink">
                <span class="icon">
                        <svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
                </span>
                <span class="labelforicon">
                 Краснодар
                </span>
        </a>
        </span>
                <span class="intermediatespace">
                </span>
                <span class="telephonenumber">
                8 (800)6003900 (круглосуточно)
                </span>
                <span class="addressandworkschedule">
                    Адрес и график работы
                </span>
                <span class="payment">
                    Оплата
                </span>
                <span class="delivery">
                    Доставка
                </span>     
</span>

</header>

Как отцентрировать содержимое блока span по центру (вертикально и горизонтально)? На данный момент текст в них выровнен по левому краю.

введите сюда описание изображения

Должно быть (цвет и расстояния)

введите сюда описание изображения

4
  • там куча span - все должны стоять в центре ? 9 июл 2021 в 10:26
  • @MaximLensky Да все (за возможным исключением .flexcitylinkwrapper). 9 июл 2021 в 10:32
  • покажите снимок экрана того что должно быть 9 июл 2021 в 10:33
  • @MaximLensky я прояснил вопрос? 9 июл 2021 в 11:12

1 ответ 1

0

Могу предложить следующий способ

#pageHeader {
    grid-area: header;
    width: 100%;
    /*
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
}

#pageHeader .headerinsides {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        /*align-items: center;*/
}

.icon {
        align-self: center;
        /*padding-left: 74px;*/
        /*padding-right: 74px;*/
}

#pageHeader .labelforicon {
        padding-left: 10px;
        /*padding-right: auto;*/
        /*width: 1200px;*/
        align-self: center;
        /*flex: 34px;*/
        /*border-bottom: 2.5px dotted black;*/
        font: 18px, PT Sans,sans-serif;
        /*white-space: pre;*/
}

.flexcitylink {
        /*margin-left: 74px;*/
        display: flex;
        flex: 60px;
        font: 18px, PT Sans,sans-serif;
}
.right-bar{
  flex:0 1 55%; 
  display: flex;
  justify-content:space-between;
}
<header id="pageHeader">
<div class="headerinsides">
        <div class="left-bar">
            <span class="flexcitylinkwrapper">
        <a href="#" class="flexcitylink">
                <span class="icon">
                        <svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
                </span>
                <span class="labelforicon">
                 Краснодар
                </span>
        </a>
        </span>
                <span class="intermediatespace">
                </span>
        </div>
        
          <div class="right-bar">
              <span class="telephonenumber">
                8 (800)6003900 (круглосуточно)
                </span>
                <span class="addressandworkschedule">
                    Адрес и график работы
                </span>
                <span class="payment">
                    Оплата
                </span>
                <span class="delivery">
                    Доставка
                </span>   
          </div>
                  
</div>

</header>

2
  • а как центрировать содержимое внутри блока? 9 июл 2021 в 11:39
  • @newbieseeker вы про какой блок и какое центрирование горизонтальное или вертикальное?
    – HTO HOT
    9 июл 2021 в 11:40

Ваш ответ

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

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