javascript - 面板内的 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 上s 和 text-align: center在 #sortable .