文本換行符在一個圓的邊界內，文本垂直和水平居中

Question

我們愛的圈子！我需要幫助將文本放在一個圓圈內，並將文本行包裹在圓圈的邊緣。

我有兩個不同的，不足的嘗試在這裏：http://chrislaursen.com/papertwin/band/

第一個利用jQuery插件TextMorph：http://nicodmf.github.com/TextMorph/en.html。這將文字很好地包裹在圓圈內，但我不知道如何垂直居中。

我的頁面上的第二個圓圈只是使用填充將文本保留在圓圈內。這是一個簡單的CSS解決方案，不會將文本置於所需的圓形中。

我認爲解決方案涉及修改第一個圓圈中使用的插件以垂直居中文本，但我不知道該怎麼做。任何幫助將不勝感激！

Answer 1

其他解決方案沒有被推廣，所以我想我會採取一個更加算法的解決方案。如果你看一下TextMorph的代碼，你會看到.content元素（包含文本），有其margin-top屬性設置爲是total-height - lineheight負（這是當你初始化TextMorph對象同時設置了的東西）。 <div>會讓你的文本通常出現在你的圈子（或其他形狀）下面，所以它被「備份」到位。我們所需要做的就是讓文本以中心爲中心，以「支持」爲中心。

下面的代碼開始通過設置.content的margin-top到1/2圓的高度。這使得文本出現在圓圈的下半部分。然後，它逐步調整的.content的margin-top，直到它幾乎中心（見代碼註釋）。它考慮的是，高度（以像素爲單位）的文本可能會改變，這取決於字體面，字體大小，瀏覽器渲染等

段：

$('.content').css('text-align', 'justify'); 
topMargin = 0 - $('#circle').height()/2; 
$('.content').css('margin-top', topMargin + 'px'); 

make_vertical_center = function() { 
    var heightAbove, offset; 

    topMargin -= lineHeight/4; // more precision, but also more increments as this approaches 1 

    $('.content').css('margin-top', topMargin + 'px'); 

    heightAbove = Math.abs(($('#circle').height() - $('.content').height())/2); 
    offset = Math.abs($('#circle').offset().top - $('.content').offset().top); 

    if (offset - heightAbove > 0) { 
     make_vertical_center(); 
    } 
}; 

make_vertical_center(); 

在Fiddle of all this看看。

Answer 2

這是遠從最好的解決方案，它更快速的修復，但它的工作原理（見here）。

$(function() { 
    var pad = new Array(75).join(" "); 
    $('#circle').prepend(pad); 

    var circle = new TextMorph(document.getElementById('circle'), { 
     width: 500, 
     height: 500, 
     lineHeight: 15 
    }); 
}); 

的想法是填補了空白空間的前綴的文本，以便它被「推」了下來。

Answer 3

我所做的就是用「p」標記環繞「div」中的文字。然後，我嘗試了一些這些6 methods如何在div元素中垂直對齊文本（如「p」標記）。

我嘗試了其中的一些 - 您可以選擇最適合您需求的那種。您可能需要進行一些CSS調整（稍微改變樣式），但重要的是如何讓這些事情發揮作用。

這是我做了什麼：

<div style="margin-top: -499px;" class="content"><p style=" 
    position: absolute; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 60%; 
    height: 30%; 
    margin: auto; 
    margin-top: 20%; 
">Bro­ok­lyn’s syn­th gro­up Pa­per­twin (Max Dec­ker, Fran­cis Car­di­nale, Nic­k Sho­pa, Jus­tin Mic­he­al Mil­ler) was fo­un­ded in 2009. It­s de­but EP 「Por­ce­la­in,」 re­le­a­sed in 2011, of­fer­s a dar­k, re­veren­t vi­si­on of new wa­ve, em­bra­cin­g it­s hig­h e­ner­gy whi­le drif­tin­g in­to a ter­ri­tory of dre­am­s an­d hal­f-lig­ht. The qu­ar­tet is set to re­le­a­se it­s se­con­d EP, 「Pe­ru,」 this sprin­g.</p></div> 

注重應用到 「P」 元素的CSS。