Question

任何人都可以告诉我如何调整＆＃34; <li>This is My Text</li>＆＃34;我的代码中的文字为中心？我尝试了很多方法将它与中心对齐，但没有任何效果:(
谢谢....

<html>
<head>
<style type="text/css">
ul.fallingtextrotator{
font-family: 'Orbitron', sans-serif;
text-shadow: 2px 2px #C0F5A9, 3px 3px #C0F5A9, 4px 4px #C0F5A9, 5px 5px #C0F5A9, 6px 6px #C0F5A9;
font-size: 20px;
color: #217C23;
letter-spacing: 10px;
font-weight: 800;
text-transform: uppercase;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}

ul.fallingtextrotator > li{
position: absolute;
opacity: 0;
top: 0;
left: 0;
-moz-transition: all 0.3s ease-in; 
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}

ul.fallingtextrotator > li:nth-of-type(even){
color: #713800;
text-shadow: 2px 2px #FDE0A6, 3px 3px #FDE0A6, 4px 4px #FDE0A6, 5px 5px #FDE0A6, 6px 6px #FDE0A6;
}


ul.fallingtextrotator > li span[class*="char"]{
display: inline-block;
}

ul.fallingtextrotator > li.dropdown span[class*="char"]{
opacity: 0;
-moz-transform: translateY(300px) rotateZ(120deg);
-webkit-transform: translateY(300px) rotateZ(120deg);
transform: translateY(300px) rotateZ(120deg);
-moz-transition: all 0.3s ease-in; 
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
</style>
<head>
<body>
<ul id="headline" class="fallingtextrotator" style="height:2em">
<li>This is My Text</li>
<li>This is My Text</li>
<li>This is My Text</li>
<li>This is My Text</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.htmlbestcodes.com/javascripts/jquery.lettering-0.6.1.min.js"></script>
<script type="text/javascript">
(function($){
var defaults = {pause:2000, ontextchange:function(msgindex, msg, $eachchar){}, cycles:1}
var transitionsupport = typeof $(document.documentElement).css('transition') != 'undefined'

$.fn.fallingtextrotator = function(options){

    return this.each(function(){
        var s = $.extend({}, defaults, options)
        var $t = $(this),
                wordgroup = [], 
                curli = 0,
                cyclescount = {cur:0, max:0}
        var $lis = $t.find('>li').each(function(i){
            var $this = $(this)
                .data('wrapperinfo', {wrapitem:i, transduration:$(this).css('transitionDuration'), currenttransition:0, wordcount:0})
                .lettering('words').children('span').lettering().end()
            wordgroup.push( $this.find('span[class*="char"]') )
            $this.data('wrapperinfo').wordcount = wordgroup[i].length
        })
        cyclescount.max = $lis.length * s.cycles 

        $t.on('transitionend webkitTransitionEnd', function(e){
            var $target = $(e.target),
                    $targetParent = $target.offsetParent()
            if (/transform/i.test(e.originalEvent.propertyName) && $targetParent.hasClass('dropdown')){
                $targetParent.data('wrapperinfo').currenttransition += 1
                if ($targetParent.data('wrapperinfo').currenttransition == $targetParent.data('wrapperinfo').wordcount){
                    $targetParent.data('wrapperinfo').currenttransition = 0
                    wordgroup[curli].css({transitionDelay:'0ms'})
                    $targetParent.css({opacity:0, transitionDuration:'0ms'}).removeClass('dropdown')
                    s.ontextchange( curli, $targetParent.text(), wordgroup[curli] )
                    curli = (curli < wordgroup.length-1)? curli + 1 : 0
                    setTimeout(function(){rotatetext()}, 50)
                }
            }
        })


        function dropword(){
            if (transitionsupport && !window.opera){
                for (var i=0; i<wordgroup[curli].length; i++){
                    var delay = Math.round( Math.random() * 1000 ) +'ms'
                    wordgroup[curli].eq(i).css('transitionDelay', delay )
                }
                $lis.eq(curli).addClass('dropdown')
            }
            else{
                $lis.eq(curli).css({opacity:0})
                curli = (curli < wordgroup.length-1)? curli + 1 : 0
                rotatetext()
            }
        }

        function rotatetext(){
            var $curli = $lis.eq(curli)
            $curli.css({opacity:1, transitionDuration:$curli.data('wrapperinfo').transduration})
            if (s.cycles==0 || cyclescount.cur++ < cyclescount.max-1){
                setTimeout(function(){
                    dropword()
                }, s.pause)
            }
        }

        rotatetext()
    })
}

})(jQuery)
</script>

<script>
jQuery(function(){ 
$('#headline').fallingtextrotator({
    pause: 2000,
    cycles: 2,
    ontextchange:function(msgindex, msg, eachchar){
    }
})
})
</script>
</body>
</html>

Answer 1

试试这个：

DEMO

ul.fallingtextrotator > li{
    width:100%;
    text-align:center;
}

Answer 2

使用以下CSS

#headline li {
padding: 0;
margin: 0;
display: block;
text-align: center;
}

Working Fiddle

Answer 3

试试这个..

li {display:inline-block;margin:auto;width: 500px;text-align:center}

将文本与中心对齐

3 个答案: