对齐横幅中心的文本

大佬教程收集整理的这篇文章主要介绍了对齐横幅中心的文本，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决对齐横幅中心的文本？

我为我的网络应用制作了一个显示在 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;
        
    }
}

解决方法

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

.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;
}