Блог

Главная - Вопросы по программированию - Выровнять текст по центру баннера

Выровнять текст по центру баннера

#html #css

#HTML #css

Вопрос:

Я создал баннер, который отображается в Internet Explorer для моего веб-приложения, но текст внутри не выравнивается по центру. Вы можете обратиться к изображению ниже.

В чем ошибка в моем коде? введите описание изображения здесь

ниже приведен код для баннера, а также его CSS упоминается ниже.

HTML-код:

 <div class="banner" id="banner_strip">
    <span class="header-font">Recommended to use Chrome, Firefox or Microsoft Edge for better performance and security</span>
    <button class="close-button" id="close_button" onclick="closeBanner()">X</button>
</div>

Код CSS :

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10  CSS styles go here */
     .banner {
        visibility: visible ;
        background-color: azure;
        padding-top: initial;
        text-align: center;
        height: 40px;
    }
    .header-font {
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 20px;
    }
    
    .close-button {
        text-align: right;
        font-size: 10px;
        background: none;
        border: none;
        
    }
}

Комментарии:

1. Скорее всего, это связано с полями вашего div с классом «баннер». Если вы установите для .banner значения margin-left и margin-right в значение auto, это может решить проблему, но это будет зависеть от стиля родительского элемента div.

Ответ №1:

Попробуйте с помощью add text-выровнять центр по классу span

  .header-font {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 20px;
    text-align: center;
}

Ответ №2:

Пожалуйста, попробуйте следовать CSS, если возникнут какие-либо вопросы, дайте мне знать.

 .banner {
   visibility: visible ;
   background-color: azure;
   padding-top: initial;
   text-align: center;
   height: 40px;
   display: inline-block;
   width: 100%;
}

.header-font {
   padding-top: 2px;
   padding-bottom: 2px;
   font-size: 20px;
   text-align: center;
}

Метки: