自動調整和垂直居中文本

我認爲這是與其他「自動調整」相關問題的不同問題。自動調整和垂直居中文本

我有一個單行文本標籤，我希望自動適應總是屏幕寬度的一半（動態調整大小等期間和之後），以及垂直和水平居中在頁面上。我已經嘗試了jQuery FitText plugin，但它似乎沒有垂直居中很好地工作（上移或下移取決於字體的大小，有時下面的視口）

這可能是由於我使用的絕對定位，但我找不到任何替代方法來完成此操作。

我的CSS：

h1 { 
    position: absolute; 
    top: 25%; 
    right: 25%; 
    left: 25%; 
    bottom: 25%; 
    display: table-cell; 
    vertical-align: middle; 
}

此的jsfiddle顯示塊，我想填補：http://jsfiddle.net/KFySS/6/

編輯：我添加了一個假的背景圖片文字上面的小提琴，其行爲非常接近我想要的實際大小的行爲。

我想用簡短的文字來填充用虛線標出的塊。它也應該垂直居中和/或水平居中。這個邊界框只是爲了說明，但這是我使用Fittext插件時的出發點。

來源

2013-01-07 7zark7

爲了確保我理解了這個問題，你是否需要這個模塊來表現它現在的行爲呢？或者你只需要文字居中？ – wakooka

正如jerome.s所說，盒子的大小在小提琴中看起來很好。是關於你正在談論的文本嗎？ – Cdeez

有沒有考慮過在表頭內使用表格？ – rbtLong

我發現，使用新CSS3 vw, vh, and vmin font sizing units的解決方案，其尺寸相對於當前視口字型。

<div> 
    <h1>Hi!</h1> 
</div> 

div { 
    text-align: center; 
} 
h1 { 
    font-size: 50vmin; 
    position: absolute; 
    top: 50%; 
    margin-top: -25vmin; 
    width: 100%; 
}

這裏是一個較新的WebKit瀏覽器的例子：

我用

http://jsfiddle.net/uTykf/

垂直居中的做法似乎有點難看，但最好我能做到。很高興聽到有沒有更好的方法。

來源

2013-01-09 16:57:25 7zark7

我認爲這是你想要的。

h1 { 
    padding: 10%; 
    text-align: center; 
    border: 4px dashed red; 
    margin: 25%; 
}

看看下面的鏈接：

http://jsfiddle.net/GLEcd/2/

來源

2013-01-07 10:31:46 zdesam

謝謝，儘管我需要調整大小的文本以填充容器，而不僅僅是居中。我更新了說明來解釋。 – 7zark7

自動調整和垂直居中文本

回答

相關問題