0

私たちはサークルが大好きです！テキストを円の中に入れて、テキスト行を円の端で折り返すのに助けが必要です。

私はここで2つの異なる、不十分な試みをしています：http: //chrislaursen.com/papertwin/band/

1つ目は、jqueryプラグインTextMorphを利用します：http：//nicodmf.github.com/TextMorph/en.html。これにより、テキストが円の中にうまく折り返されますが、垂直方向の中央に配置する方法がわかりません。

私のページの2番目の円は、単にパディングを使用してテキストを円内に保持します。これは、テキストを目的の円の形にしない単純なcssソリューションです。

解決策には、最初の円で使用されているプラ​​グインを変更してテキストを垂直方向に中央揃えにする必要があると思いますが、その方法がわかりません。どんな助けでも大歓迎です！

4

3 に答える 3

1

他の解決策は一般化されていないので、よりアルゴリズム的な解決策を作ることに挑戦しようと思いました。TextMorphのコードを見ると、.content要素 (テキストを含む) のmargin-topプロパティが負の値に設定されていることtotal-height - lineheightがわかります (これらは両方とも、TextMorph オブジェクトを初期化するときに設定したものです)。テキストが含まれる<div>は通常、円 (または他の形状) の下に表示されるため、位置に「バックアップ」されています。テキストを見事に中央揃えにするために必要なことは、中央揃えになるように「バックアップ」することだけです。

次のコードは、 を円の高さの 1/2 に設定することから始め.contentますmargin-top。これにより、円の下半分にテキストが表示されます。次に、ほぼ中央になるまで、margin-topのを段階的に調整します(コード内のコメントを参照)。フォントフェイス、フォントサイズ、ブラウザのレンダリングなどに応じて、テキストの高さ (ピクセル単位) が変わる可能性があることを考慮してください。.content

スニペット:

$('.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 を見てください。

于 2012-11-15T23:27:55.787 に答える
0

私がしたことは、「p」タグで「div」内のテキストを囲むことでした。 次に、ブロック要素 (「p」タグなど) にある場合に div 内のテキストを垂直方向に配置する方法について、これらの 6 つの方法をいくつか試しました。

私はそれらのいくつかを試しました - あなたのニーズに最適なものを選ぶことができます. いくつかの 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 に注意してください。

于 2012-11-15T22:28:23.447 に答える
0

これは最善の解決策とはほど遠いものであり、より迅速な修正ですが、機能します (こちらを参照)。

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

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

このアイデアは、テキストが「押し込まれる」ように、空白のプレフィックスでテキストを埋めることです。

于 2012-11-15T22:03:54.780 に答える