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

Switch between different table rows

I have here a table that is used for displaying menu and submenu items. It's a mix of PHP (to fetch the menu items and their respective submenus) and HTML. What I am trying to figure out is how to toggle the visibility of only the submenu items under ...

javascriptphpjqueryhtmlcss

The Send.php script is missing the input fields for Name and Email

Running my own website at CrystalVision.com, I have some challenges with my PHP skills. The issue lies within my send.php file. Although the email functionality works fine and I receive messages, the Name and Email fields filled in by users are not display ...

phphtmlemailhtml-emailcontacts

Aligning cards

Struggling to align these cards perfectly at center: Despite thorough research on both Google and Stack Overflow, the solution continues to elude me. I've experimented with various methods such as display: flex, justify-content: center, and align-ite ...

htmlcenteringcard

Boundary around an object within a unified picture

I'm facing a bit of difficulty with a task. I need to add a border around an element within an image (I can't insert an image due to low reputation), and this border should match the width and height of the element exactly. It also needs to be re ...

htmlcsstwitter-bootstrap

Sometimes I receive a notification that the session ID cannot be regenerated because the session is not active, without any apparent cause

Despite reading numerous posts on this problem, none have provided a solution for me! Some suggest that using session_regenerate_id(true); before session_start(); could be causing the issue. However, this is not applicable to my code. Others recommend remo ...

phphtmlsession

Incorporating text overlays on images that are compatible with responsive websites is a top priority for me

This is a piece of HTML code that utilizes bootstrap 3 for design purposes. The challenge faced is related to positioning text over an image. When resizing the browser, the alignment of the text with the background gets disturbed. Assistance is needed in r ...

htmlcsstwitter-bootstrap-3bootstrap-modal

Using the window.prompt function to send information to specific fields in a MySQL database is not functioning correctly. I am looking for assistance with this issue

Currently, I am attempting to send some data to a server that is MySQL-based. After running the code below, it seems like there are no errors showing up in the console. Can you please review this code and let me know if you spot any issues? I would really ...

javascriptphphtmlmysqlajax

Implement a fade-in effect when loading content into a DIV using Jquery

Here is the code snippet I am working with: $('.LINK').on('click', function (event) { event.preventDefault(); $('#Grid').load($(this).attr('href') + ' .project_thumb'); }); The current functionality ...

jqueryloadfadein

Customizing the styling of a TextField component in ReactJS using material-ui

I am currently working with Reactjs and material-ui. I am looking to apply some custom styles to a TextField using css. Specifically, I would like to change the color of the TextField underline and label when the input is clicked. Although I know it can b ...

javascriptcssreactjsmaterial-ui

Styling images with text alignment in CSS

I'm trying to figure out how to align an image to the left, some text to the top right, and some text to the bottom right. The parent div contains a background image. <div id="parent" style="background: url(bg.jpg) repeat-x left top"> <i ...

htmlcsscss-float

jQuery Typeahead implementation malfunctioning when text matches either the first or last character

It seems like there is a problem with the .split() method, especially when the characters match the beginning or end of a name. To see the issue in action, visit this JSFiddle link: http://jsfiddle.net/5uebxvex/ I'm working with the Employees tabl ...

phpjqueryjsonajax

Custom error messages in jQuery validation

I'm having trouble implementing jQuery validation with the data-val-lookup attribute on my input fields: Below is the code snippet I'm using to set up the validation rule: $(function () { $.validator.addMethod('lookup', function ( ...

jqueryjquery-validate

What is the best way to create a fullscreen div without using an iframe?

My website features various div elements acting as separate windows. However, when I remove these divs, the content no longer fits the entire page. I attempted to use CSS to make it full-page without using iframes, just with a simple <p>Test</p& ...

htmlcssiframe

Spin a sphere within a semicircle using html and css

I have been working on a project to animate a ball inside a crescent shape using HTML and CSS. You can check out my codepen here. However, I am facing an issue where the ball is currently stuck at the top of the crescent. I would greatly appreciate any as ...

htmlcssanimation

Coding in PHP, JavaScript, and HTML allows builders

I am facing some difficulties in locating my specific question, so I will describe it here. Currently, I am working with an oracle database and integrating it into an HTML website using javascript and php. I have successfully displayed the php file, but th ...

javascriptphphtmldatabase

When implementing Ajax with a Spring controller, it will redirect the user to a different location

I am currently working on developing a Spring MVC application similar to a "Cinema" app. I have implemented a RestController with a Get method that produces JSON responses. private SessionService sessionService; public SessionController(SessionService ses ...

javajqueryajaxspring-mvc

Javascript editing enhancement for real-time changes

Are there any tools for in-place editing of Javascript code? I'm looking for something similar to Firebug, which is great for instant CSS editing and previewing but doesn't have the capability to edit JavaScript directly. Is there a tool or addon ...

javascripthtmlcssfirefox-addonfirebug

I find myself struggling to manage my javascript dependencies

Currently, I am utilizing NPM along with various angular packages. As per the tutorial on Basic Grid Part 1 at this link, I am encountering challenges. This is my file directory structure: D:/nodeStuff/uiGrid includes: node_modules uigrid.css uigrid.h ...

javascripthtmlcssangularjsnpm

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

jqueryhtmltwitter-bootstrapangular

What is the best way to customize the look of the v-calendar component in Vue.js?

I've recently started a project that involves Vue.js, and I needed to create a datepicker for it. After some research, I opted to utilize the v-calendar package. The implementation of the component went smoothly and functioned as expected right out o ...

cssvue.jsdatepickervcalendar