面板中的 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

小提琴。

我在 li s 上使用 display: inline-block 而不是 float: left，在 #sortable 上使用 text-align: center .