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. Alternatively, you can use margin: 0 auto; center alignment 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 looking at the expected result, I found this as one of the solutions.

 .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 helps you!

Answer 2

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

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

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

Answer 3

Be that as it may, you have a few problems with your markup, and your CSS may do a little neat, however you can fix this problem by removing display: block; from .ui-bar, .ui-body . This is because you use the centering method of the table to center the text and image, changing the .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> 

Answer 4

The first problem I see is that you are using a div inside a, which is not allowed because divs are a block element and links are inline, so you must change these divs to spaces.

 <div class="ui-block-a" > <div class="ui-bar ui-bar-a"> <div class="menu-elem"> <a href="#"> <span class="menu-img"> <img src="images/t.png" style="width: 50px;"> </span> <span class="menu-text"> test </span> </a> </div> </div> </div> .ui-bar, .ui-body { position: relative; overflow: hidden; display: block; padding: 0.9em 1em !important; clear: both; text-align: center; } 

If you want the behavior of blocks on these spans

 .ui-bar span { display: block; } 

Fiddle: https://jsfiddle.net/9tw1f4sL/1/