Horizontal Centering with text-align: center and display-block

When trying to center an element within another element you might not be able to use margin 0 auto if the position or display value of one of the elemts isn't right. Another method you can use is to set the display value of the inner element to display-block, and then give the outer element text-align: center. You also need to set the width of the outer element.

Here's an example showing everything you need:

.outer {
  width: 100%;
  text-align: center;
}

.inner {
  display: inline-block;
}