文本对齐方式并非在所有设备中居中

Question

我有一个页脚 div 使用此代码

.footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background-color: #DDD;
}
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;

}
.footer-text a {
text-decoration: none;
}

<nav class="footer">
    <div class="center-xy footer-text">
        Made with <span style="color: red; font-size: 1.5em;">&hearts;</span> by <strong><a href="https://www.facebook.com/shantanuandbanerjee" target="_blank">Shantanu Banerjee</a></strong>
    </div>
</nav>

问题是 footer-text 很好地集中在笔记本电脑屏幕和手机上。但是在手机上，文本是两行的。

解决方法是什么？

Answer 1

只需使用

.center-xy {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
  }

Answer 2

只需添加以下内容css

.footer-text {
    min-width: 200px;
    text-align: center;
}

它会被修复。

这是一个工作演示：

.footer {
            width: 100%;
            height: 50px;
            position: absolute;
            bottom: 0;
            background-color: #DDD;
        }
        .center-xy {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .footer-text {
            font-family: 'Calibri';
            font-size: 0.8em;

        }
        .footer-text a {
            text-decoration: none;
        }
       .footer-text {
         min-width: 200px;
         text-align: center;
        }

<nav class="footer">
        <div class="center-xy footer-text">
            Made with <span style="color: red; font-size: 1.5em;">&hearts;</span> by <strong><a href="https://www.facebook.com/shantanuandbanerjee" target="_blank">Shantanu Banerjee</a></strong>
        </div>
</nav>

Answer 3

试试这个：

.footer {
    position: absolute;
    bottom: 0;
    margin:0;
    background-color: #DDD;
    left:0;
    right:0;
    padding:15px 0;
    text-align:center
}
.center-xy {
   
}
.footer-text {
    font-family: 'Calibri';
    font-size: 0.8em;

}
.footer-text a {
    text-decoration: none;
}

<nav class="footer">
        <div class="center-xy footer-text">
            Made with <span style="color: red; font-size: 1.5em;">&hearts;</span> by <strong><a href="https://www.facebook.com/shantanuandbanerjee" target="_blank">Shantanu Banerjee</a></strong>
        </div>
</nav>

Answer 4

我不确定代码（在发表评论时），但看起来有很多填充，因为即使有足够的可见性 space，文本也在换行。所以..

减少文本周围的填充。或者
为您的文本应用 white-space: nowrap;。

文本对齐方式并非在所有设备中居中

Text alignment not center in all devices

html

css

footer