The alignment feature in the center is malfunctioning

I'm currently utilizing jQuery Mobile and have the following HTML along with 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>

text-align: -moz-center; is functioning properly in Mozilla but not in other browsers. When I switch to text-align: center;, it fails to work in any browser.

jqueryhtmlcssjquery-mobile

Answer №1

For consistent center alignment across all browsers, use text-align:center;. You can also utilize margin: 0 auto; for center alignment. Check out the 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 reviewing your desired outcome, I discovered this 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;
 }

I hope this information proves to be helpful!

Answer №3

It has been pointed out that there are some issues in your markup and CSS that could use some cleaning up. One way to address this is by removing the display: block; property from the .ui-bar, .ui-body class. This change is necessary because you are employing a table-based centering technique for aligning text and images, and setting .ui-bar to display: block; will disrupt this technique.

.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

One issue that stands out is the use of divs within an anchor tag, which is not permitted because divs are block elements while links are inline. To remedy this, consider changing the divs to spans.

<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;
}

To achieve block behavior on those spans:

.ui-bar span {
   display: block;
}

Check out the Fiddle for a demo: https://jsfiddle.net/9tw1f4sL/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshoot: Issue with Multilevel Dropdown Menu Functionality

Check out the menu at this link: The issue lies with the dropdown functionality, which is a result of WordPress's auto-generated code. Css: .menu-tophorizontalmenu-container { margin: 18px auto 21px; overflow: hidden; width: 1005px; ...

javascriptjquerycssmenudrop-down-menu

Tips for adding an animated box shadow in CSS without adjusting the shadow's direction

A unique box with a rotating animation was created, however, applying a box-shadow caused the shadow to also rotate along with the box. <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body{ displa ...

csscss-animations

Creating custom Magento extensions with jQuery integration

I am in the process of developing my very first extension that I plan to market on magento connect. One of the requirements for my module is jquery. The dilemma I face is if I include jquery in my module, it could potentially overwrite a version that the ...

jquerymagento

Guide to displaying a function result in Vue 3

I have just started learning vue js and I am facing an issue. I want to display the value returned by the following function in a table row: The function is: getGroup(id){ this.users.forEach(element =>{ if(element.id===id) ...

javascripthtmlvue.jsvuejs3

Vue is currently operating in development mode

I keep receiving this notification each time I visit the site: Vue is currently running in development mode. Remember to switch to production mode when deploying for production. Find more helpful tips at .... I came across a solution from someone suggest ...

htmllaravelvue.js

Toggle the play/pause function by clicking - Trigger Ajax

I have a campaign that can be either played or paused. Currently, I have implemented the pause feature using AJAX and now I need to add the play feature as well. When I click on the pause button, I want it to be replaced with the play button. This is the ...

javascriptjqueryajax

Is there a way to stop the MUI Select component's width from increasing when I choose multiple options?

Please check out the demo I created on codesandbox by clicking here View codesandbox demo I have implemented the MUI Select component with various props to enable multiple options selection without a fixed width constraint. Using a grid layout, I have ev ...

cssmaterial-uicss-grid

What's the reason for the inability to resize fieldset using both?

Can someone explain why the resize control is not enabled on the fieldset element? The documentation mentions that resize does not work with: Inline elements Block elements that have overflow set to visible fieldset { resize: both; overflow: h ...

htmlcss

Special Table Spacing

Within my table, I am looking to create spacing between cells without setting padding and/or margin on each individual td. While using the CellSpacing and/or CellPadding properties of the table could be a potential solution, these properties apply space on ...

htmlcsshtml-table

Utilizing HTML5 to automatically refresh the page upon a change in geolocation

I have a web application built with AngularJS. One of the functionalities is activated only when the user is in close proximity to specific locations. To make this work, I can constantly refresh the page every 5 seconds and carry out calculations to dete ...

javascripthtmlangularjsgeolocation

How can I convert a list of checkboxes, generated by ng-repeat, into multiple columns?

Here is the HTML code snippet: <div class="checkbox"> <label> <input type="checkbox" ng-model="selectedAll.value" ng-click="checkAll()" />Check All </label> </div> <div class="checkbox" ng-repeat="carType i ...

javascripthtmlangularjstwitter-bootstrapcheckbox

Allowing SVGs to be clickable without disrupting the functionality of YouTube videos

I'm experiencing an issue with the overlapping of the svg and YouTube elements. If you hover your mouse over, just to the right of the svg and click, instead of opening the video, it redirects you back to the previous page. Clicking on the area betw ...

javascriptcsssvg

Incorporate a PNG icon into your HTML code

Is there anyone who can assist me, please? Apologies in advance if my question is too basic for some, but I'm new to this so please bear with me. I am using the script below to create an image gallery in fancyBox. <!DOCTYPE html PUBLIC "-//W3C// ...

jqueryiconsfancybox

Switch the Ionic Slide Box to the "does-continue" setting

Currently in the process of constructing a slide-box containing numerous items. I've borrowed the code from the example provided here for an infinite number of items, and it's performing well. However, I have a considerable yet finite amount of ...

javascriptcssangularjsionic-framework

Is it permissible to use DEFER or ASYNC when including a stylesheet?

I am curious if script files are able to utilize the DEFER and ASYNC keywords on a resource include. Are these keywords also compatible with stylesheet (CSS) includes? The syntax I imagine would be: <link rel="stylesheet" type="text/css" href="./path/ ...

htmlcssasynchronousdeferred-loading

What is the functionality behind the Image Hover jQuery plugin?

I am relatively new to using jQuery and I would like to incorporate the Image Hover plugin on my website. Specifically, I have a collection of thumbnails representing various projects on my site. What I need help with is implementing a feature where when y ...

jqueryjquery-pluginshoverjquery-hover

Error in Typescript: Draggable function is undefined

I'm currently working with typescript alongside vue and jquery ui. Encountering the error "TypeError: item.$element.draggable is not a function". What am I doing wrong in my code? I have already included jquery-ui, as shown in the following files. M ...

jquerytypescriptjquery-uivue.jstyping

Reorganizing the position of the HTML form method for processing PHP $_POST data

Content goes here ...

javascriptphphtmlcss

Interactive form found on a webpage

Hey there! I'm currently working on a task where I want a form to be displayed when the edit button is clicked. Once the save button in the form is pressed, I want to update my database with the new information. It's crucial that this process hap ...

javascriptjqueryajaxforms

What is the reason behind the failure of this ajax request?

I have encountered an issue with my ajax code. It seems to work in one file, but fails to function properly in other files. Below is the code snippet in question: $.ajax({ type: "GET", url: "get_child.php?pc_id="+pc_id.toString(), }).done(fun ...

ajaxjquery