0

我们爱圈子！我需要帮助将文本放在一个圆圈内，并让文本行环绕在圆圈的边缘。

我在这里有两种不同的、不足的尝试：http: //chrislaursen.com/papertwin/band/

第一个使用 jquery 插件 TextMorph：http ://nicodmf.github.com/TextMorph/en.html 。这将文本很好地包裹在圆圈内，但我不知道如何垂直居中。

我页面上的第二个圆圈只是使用填充将文本保留在圆圈内。这是一个简单的 css 解决方案，它不会将文本置于所需的圆形中。

我认为解决方案涉及修改第一个圆圈中使用的插件以使文本垂直居中，但我不知道该怎么做。任何帮助将不胜感激！

4

3 回答 3

1

其他解决方案没有通用化，所以我想我会尝试制作一个更具算法性的解决方案。如果您查看TextMorph的代码，您会看到.content元素（包含文本）的margin-top属性设置为负值total-height - lineheight（这些都是您在初始化 TextMorph 对象时设置的）。包含您的文字的<div>文字通常会出现在您的圆圈（或其他形状）下方，因此它被“备份”到位。为了使文本完美居中，我们需要做的就是“备份”它以使其居中。

下面的代码首先将.content's设置margin-top为圆高度的 1/2。这使文本出现在圆圈的下半部分。然后它逐渐调整margin-topof.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();

看看这一切的小提琴。

于 2012-11-15T23:27:55.787 回答
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 回答
0

我所做的是用“p”标签将“div”中的文本包裹起来。然后我尝试了这6 种方法 ，当它在块元素中时如何垂直对齐 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。

于 2012-11-15T22:28:23.447 回答