文本对齐不是所有设备的中心

Question

我有一个带有此代码的页脚div

＆＃13;

＆＃13;

self.add.configure(command=lambda: account_support.addaccount(self.key.get(), self.accName.get()))

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

问题是<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 1

我不确定代码（在发布评论时），但看起来有很多填充，因为即使有足够的可见空间，文本也会包装。所以..

• 减少文本周围的填充。 OR
• 为您的文字申请white-space: nowrap;。

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

试试这个：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

只需使用

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