Question

我试图让文本绝对居中于html div中，即使它比封闭的div宽。

文本是居中对齐的，只要它小于封闭的div，但是当它超出封闭宽度的宽度时，它会左对齐（我在最新版本的Chrome，FF，IE上检查过这个）。

我有这个：

    <style>
   .container {
        position: relative;
        width: 300px;
        height: 200px;
        text-align: center;
        margin: auto;
        white-space: nowrap;
        overflow: hidden;
        background: silver;
    }

    .line {
        position: absolute;
        width:100%;
        font-size: 40px;
    }

    </style>

    <div class="container">
        <div class="line">
            PLEASE ALIGN ME TO THE CENTER
        </div>
    </div>

有关上述代码的实时版本，请参阅http://jsfiddle.net/acc4u/5/ - 您可以减小字体大小，以便在较窄时查看其中心对齐方式。

我可以使用left:-nnpx css属性，这将完成工作，但这将非常不灵活，因为我需要计算文本的宽度来计算偏移量。由于我打算动画文本的大小，因此需要动态计算。

Answer 1

基于Aligning image to center inside a smaller div，我做了这个：http://jsfiddle.net/thirtydot/x62nV/2/。

看起来很好，除了在WebKit浏览器上，当你上下移动鼠标时，文字非常不稳定。

即使内容溢出包含div，CSS div中内容的绝对居中

1 个答案: