CSS center display inline block?

Question

I have a working code here: http://jsfiddle.net/WVm5d/ (you might need to make the result window bigger to see the align center effect)

Question

Answer 1

You don't need to use "display: table". The reason your margin: 0 auto centering attempt doesn't work is because you didn't specify a width.

This will work just fine:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

You don't need to specify display: block since that div will be block by default. You can also probably lose the overflow: hidden.

Answer 2

I just changed 2 parameters:

.wrap {
    display: block;
    width:661px;
}

Live Demo

Answer 3

Similar to @vijayscode's answer, this will horizontally center an inline-block element (but without needing to modify its parent's styles as well):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left