jquery - 水平居中 在 内并保持动画工作

Question

我试图将所有元素居中并保持动画正常运行。我试图删除 float:left在 <li>并添加 text-align:center在 <ul>但随后动画就崩溃了。

这是 EXAMPLE FIDDLE

HTML

<div class="content">
    <ul id="accordion">
      <li>
        <img src="images/section_1.png" />
        <strong>Section 1 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
        <img src="images/section_3.png" />
        <strong>Section 3 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
        <img src="images/section_4.png" />
        <strong>Section 4 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
        </li> 
  </ul>
</div>

CSS

    body{
        background:#000;
    }
    .content{
        width: 100%;
        margin-left: auto ;
        margin-right: auto ;
    }
    img{
        width:120px;
        height:500px;
    }
    #accordion {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 500px;
        overflow: hidden;
        background: #2A2C2D;
        text-align: center;

        margin: 0 auto;
}

    #accordion li {
        float: left;
        border-left:
        display:inline-block;
        height: 500px;
        width: 120px;
        padding: 15px 0;
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        line-height: 1.5em;
        border-left: 1px solid #fff;
        cursor:pointer;
    }

    #accordion li img {
        border: none;
        border-right: 1px solid #fff;
        float: left;
        margin: -15px 15px 0 0;
    }

    #accordion li.active {
        width: 450px;
    }

JavaScript

$(document).ready(function(){
        //active le premier élément
        activeItem = $("#accordion li:first");
        //$(activeItem).addClass('active');
        $opened = false;
        $("#accordion li").click(function(){

          if(activeItem == this && $opened){

            //closing accordion
            $(activeItem).animate({width: "120px"}, 300);
            $(this).animate({width: "120px"}, 300);
            console.log("active item ", activeItem );
            console.log("this ", this );
            $opened = false;             
          }else{
            $(activeItem).animate({width: "120px"}, {duration:300, queue:false});
            $(this).animate({width: "410px"}, {duration:300, queue:false});
            activeItem = this;
            $opened = true;            
          }

        });
    var $src = null;  
    $("#accordion li").mouseover(function(){
        $src = $(this).children('img').attr('src');
        $(this).children('img').attr('src', 'images/section_3.png') 
      }).mouseout(function(){
          $(this).children('img').attr('src', $src); 
      });      

    });

Answer 1

添加“显示:表格；”到你的 ul:

#accordion {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 500px;
    overflow: hidden;
    background: #2A2C2D;
    text-align: center;
    display: table;
    margin: 0 auto;
}