text-align :center not working

Question

I am using jquery mobile and have the following html and css:

    .ui-grid-a {
padding: 0;
margin: 0;
margin-top: 15px;
height: 380px;
}
.ui-block-a, .ui-block-b {
padding: 0;
margin: 0;
height: 33.3%;
}
.ui-block-a a, .ui-block-b a {
width: 50%;
}
.ui-bar-a, ui-bar {
margin: 0 auto;
padding: 0;
height: 90%;
width: 90%;
max-width: 500px;
text-align: center;
/* Gradient set-up */
background: #3DC8F3 !important;
/* Border set-up */
border: 0px solid white;
border-radius: 0px;
box-shadow: 0px 0px 0px #000;
display: table;
}
.menu-elem {
margin: 0;
display: table-cell;
vertical-align: middle;
text-align: center !important;
}
.menu-elem a {
text-decoration: none;
}
.menu-elem .menu-text {
margin-top: 5px;
font-size: 0.9em;
color: #FFF;
text-align:center;
}

.ui-bar, .ui-body {
    position: relative;
    overflow: hidden;
    display: block;
    padding: 0.9em 1em !important;
    clear: both;
    text-align: center !important;
}
   This is the full css that is being rendered for this block 

<div data-role="page" id="AppBody" style="background: #00AEEF"> 
<div data-role="header"style="background:#0E74BC;color:white;">
<h1 class="Home">Home</h1>
<a href="#" data-role="button"data-direction="reverse" onclick="WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: WL.Client.reloadApp})" data-transition="slide"
        data-iconpos="notext"  class="ui-btn-right"><img src="images/logout.png" style="width: 25px;"></a>
</div>
<div role="main" class="ui-content">
<div class="ui-grid-a"> <!-- menu-container --> 
<div class="ui-block-a">
  <div class="ui-bar ui-bar-a">
    <div class="menu-elem">
      <a href="#">
        <div class="menu-img">
          <img src="images/t.png" style="width: 50px;">
        </div>
        <div class="menu-text">test</div>
      </a>
    </div>
  </div>
</div>
</div>
</div>
</div>

text-align: -moz-center; works fine in Mozilla but not in other browsers. If I use text-align: center; then it does not work in any browser.

Answer 1

Use only text-align:center; It will work in all browsers.. In addition you can use margin: 0 auto; to align in center Demo

.ui-bar, .ui-body {
    position: relative;
    overflow: hidden;
    display: block;
    padding: 0.9em 1em !important;
    clear: both;
    text-align: center;
    margin:0 auto;
}

Revised Demo:

After seeing your expected output, I found this as one of the solution..

.ui-grid-a {
     padding: 0;
     margin: 0;
     margin-top: 15px;
     height: 380px;
 }
 .ui-block-a, .ui-block-b {
     padding: 0;
     margin: 0 auto;
     height: 33.3%;
 }
 .ui-block-a *, .ui-block-b * {
     margin: 0 auto;
     text-align: center;
 }
 .ui-block-a a, .ui-block-b a {
     width: 50%;
 }
 .ui-bar-a, ui-bar {
     margin: 0 auto;
     padding: 0;
     height: 90%;
     width: 90%;
     max-width: 500px;
     text-align: center;
     /* Gradient set-up */
     background: #3DC8F3 !important;
     /* Border set-up */
     border: 0px solid white;
     border-radius: 0px;
     box-shadow: 0px 0px 0px #000;
     display: table;
 }
 .menu-elem {
     margin: 0 auto;    
     text-align: center !important;
 }
 .menu-elem a {
     text-decoration: none;
      margin: 0 auto;    
     text-align: center !important;
 }
 .menu-elem .menu-text {
     margin-top: 5px;
     font-size: 0.9em;
     color: #FFF;
     text-align:center;
 }
 .ui-bar, .ui-body {
     position: relative;
     overflow: hidden;
     display: block;
     padding: 0.9em 1em !important;
     clear: both;
     text-align: center !important;
 }

Hope this will help you !!

Answer 2

There is no need to use -moz prefix. All browsers support it. You have to provide width to the element for text-align to work.

Demo: https://jsfiddle.net/86ghx94c/

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Answer 3

As braks points out, you do have a few issues with your markup and your CSS could do with a bit of a tidy up, however, you can fix this issue by removing display: block; from .ui-bar, .ui-body. This is because you are using a table centering technique to center the text and image, changing .ui-bar to display: block; stops this technique from working.

.ui-grid-a {
  padding: 0;
  margin: 0;
  margin-top: 15px;
  height: 380px;
}
.ui-block-a,
.ui-block-b {
  padding: 0;
  margin: 0;
  height: 33.3%;
}
.ui-block-a a,
.ui-block-b a {
  width: 50%;
}
.ui-bar-a,
ui-bar {
  margin: 0 auto;
  padding: 0;
  height: 90%;
  width: 90%;
  max-width: 500px;
  text-align: center;
  /* Gradient set-up */
  background: #3DC8F3 !important;
  /* Border set-up */
  border: 0px solid white;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000;
  display: table;
}
.menu-elem {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  text-align: center !important;
}
.menu-elem a {
  text-decoration: none;
}
.menu-elem .menu-text {
  margin-top: 5px;
  font-size: 0.9em;
  color: #FFF;
  text-align: center;
}
.ui-bar,
.ui-body {
  position: relative;
  overflow: hidden;
  /* display: block; remove this*/
  padding: 0.9em 1em !important;
  clear: both;
  text-align: center !important;
}

<div data-role="page" id="AppBody" style="background: #00AEEF">
  <div data-role="header" style="background:#0E74BC;color:white;">
    <h1 class="Home">Home</h1>
    <a href="#" data-role="button" data-direction="reverse" onclick="WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: WL.Client.reloadApp})" data-transition="slide" data-iconpos="notext" class="ui-btn-right">
      <img src="images/logout.png" style="width: 25px;">
    </a>
  </div>
  <div role="main" class="ui-content">
    <div class="ui-grid-a">
      <!-- menu-container -->
      <div class="ui-block-a">
        <div class="ui-bar ui-bar-a">
          <div class="menu-elem">
            <a href="#">
              <div class="menu-img">
                <img src="http://placehold.it/50x50" style="width: 50px;">
              </div>
              <div class="menu-text">test</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>