堆栈内存溢出
  简体   繁体   English

在中心对齐生成的文本

[英]Align generated text in center

 原文  2013-09-11 12:40:28  9   3    javascript/ jquery/ html/ css

问题描述

JS FIDDLE JS菲德尔

I display text with an animation using third party plugin, now after animation completed my html look like this 我使用第三方插件在动画中显示文本，现在动画完成后，我的html看起来像这样 

<div data-cj-randomize="false" data-cj-loop="false" class="cj-fx cj-fx-text-link" id="effect-1" style="font-size: 32px; color: rgb(34, 34, 34); width: 850px;"><a class="cj-fx-spacer">&nbsp;</a>
    <a data-cj-scale-y-end="1" data-cj-scale-y-start="0" data-cj-rotate-x-end="0" data-cj-rotate-x-start="90" data-cj-buffer-y="70" data-cj-buffer-x="70" data-cj-animate-opacity="true" data-cj-easing="Circ.easeInOut" data-cj-duration="5000" data-cj-animation-delay="0" data-cj-start-delay="0" data-cj-animate-by-word="false" data-cj-sequence="forward" data-cj-direction="in" data-cj-type="flyTopCenter" class="cj-fx-text" target="_blank" href="#" style="">
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 0px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">T</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 31px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">h</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 55px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">e</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 77px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">m</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 114px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">e</span>
        <span style="position: static; left: 136px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 149px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">f</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 164px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">o</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 190px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">r</span>
        <span style="position: static; left: 207px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 220px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">O</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 256px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">p</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 281px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">e</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 303px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">n</span>
        <span style="position: static; left: 327px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 340px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">C</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 373px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">l</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 385px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">a</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 407px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">s</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 426px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">s</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 445px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">r</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 462px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">o</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 488px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">o</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 514px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">m</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 551px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">s</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 570px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">&ndash;</span>
        <span style="position: static; left: 595px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 608px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">T</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 639px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">O</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 675px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">I</span>
        <span style="position: static; left: 692px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 705px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">M</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 749px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">a</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 771px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">r</span>
        <span style="position: static; left: 788px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 801px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">1</span>
        <span style="visibility: visible; opacity: 1; left: 826px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">3</span>
    </a>
</div>

I need to set the text in center using jquery 我需要使用jQuery在中心设置文本

3 个解决方案

解决方案1
 2  2013-09-11 12:50:05

If you get rid of this 如果你摆脱了这个 

<a class="cj-fx-spacer">&nbsp;</a>

and change .cj-fx-text to: 并将.cj-fx-text更改为： 

.cj-fx-text {
    perspective: 1000px;
    position: absolute;
    display: block;
    transform-style: preserve-3d;
    visibility: hidden;
    text-align: center;
}

http://jsfiddle.net/ewJ4L/1/ http://jsfiddle.net/ewJ4L/1/

Is this what you wanted? 这就是你想要的吗？

解决方案2
 2  2013-09-11 12:58:26

Change css 更改CSS 

.cj-fx-text {
    text-align:center;
    width:100%;
    left: 0;
    perspective: 1000px;
    position: absolute;
    top: 0;
    transform-style: preserve-3d;
    visibility: hidden;
}

FIDDLE HERE 在这里

解决方案3
 2 已采纳  2013-09-11 12:59:51

To center your final text line, you need to have the following CSS rules: 要使最终文本行居中，您需要具有以下CSS规则： 

#effect-1 {
    text-align: center; /* add this */
}

.cj-fx-text {
    position: absolute; /* remove this */
    top: 0; /* remove this */
    left: 0; /* remove this */
}

This could be implemented using the jQuery .css() method. 这可以使用jQuery .css()方法实现。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在选择中对齐文本中心 - Align Text Center in Select 文字居中对齐 - Align text to center 按钮文字与CSS居中对齐 - Button text align to center CSS 使文本在图像中心对齐 - Make Text align in center of image 居中对齐纯文本（php） - Center align plain text (php) 居中对齐图例文本和圆圈 - Center align legend text and circle CSS 文本居中对齐关闭 - CSS text align center is off 将动画过渡到文本对齐方式：居中 - transition animation to text align: center 居中对齐操作表文本和图标 - Center align the actionsheet text and icons FabricJS：垂直对齐文本中心 - FabricJS: Vertical Align text center
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM