面板中的HTML / CSS中心内容 - 包含JSFiddle

Question

这是一个JSFiddle：

http://jsfiddle.net/y8bhc1w7/1/

HTML：

<div class="panel panel-default" style="background-color: #CEECF5;">
      <div class="panel-body">
        <ul id="sortable">
          <li class="ui-state-default">p</li>
          <li class="ui-state-default">e</li>
          <li class="ui-state-default">r</li>
          <li class="ui-state-default">r</li>
          <li class="ui-state-default">o</li>
        </ul>
    </div>
   </div>

CSS：

#sortable { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 1250px; 
}
#sortable li { 
margin: -8px 8px 3px 0; 
padding: 5px; 
float: left; 
width: 40px; 
height: 40px; 
font-size: .8em; 
text-align: center; 
font-weight:bold; 
}

JS：

$(function() {
  $(" #sortable ").sortable({axis: "x", containment: "window"});
});

我试图将字母瓷砖'p'，'e'，'r'等相对于瓷砖所在的面板中心。有关如何做到这一点的任何想法？

Answer 1

<强> FIDDLE

我在display: inline-block上使用float: left代替li，text-align: center使用#sortable。