jquery - Center aligned <li> with same height and width -

I am using jquery to sort letters in the word jumble game. I need a list item to display: I need to focus inline and in their container. I also want them all to have the same height and width (70px x 70px) so that they look like a scrabble tile.

However, the only way I can get them the same height and width is if I leave them but are not centered in containers, if I adjust them to inline-block and padding, most of them Looks like a square, but no letter like "I" is enough and it does not look like a class.

Here's my HTML:

  & lt; Div id = "container" & gt; & Lt; Div class = "letter" & gt; & Lt; Ul id = "sort" & gt; & Lt; Li class = "ui-state-default" & gt; L & lt; / Li & gt; & Lt; Li class = "ui-state-default" & gt; A & lt; / Li & gt; & Lt; Li class = "ui-state-default" & gt; T & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "letter" & gt; & Lt; Ul id = "sort-2" & gt; & Lt; Li class = "ui-state-default" & gt; K & lt; / Li & gt; & Lt; Li class = "ui-state-default" & gt; I & lt; / Li & gt; & Lt; Li class = "ui-state-default" & gt; H & lt; / Li & gt; & Lt; Li class = "ui-state-default" & gt; T & lt; / Li & gt; & Lt; Li class = "ui-state-default" & gt; G & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div style = "clear: both;" & Gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Thanks for your help; I think this is a simple but I can not understand it

Usage display: inline-block and both of them width and height of 70px Give. You can remove the padding, because they can be centered vertically by the line-height in the box and can be centered with horizontally text-align: center .

Updated Bella:

#sortable li, #Sort-2Li {margin: 3px 3px 3px 0; Display: inline-block; Height: 70px; Color: #fff; Background color: # 333; Font-size: 36px; Line-height: 70px; Vertical-align: medium; Text align: center; Width: 70px; }