Guide to positioning an image at the center in jqm with the help of the Mosaic plugin

Recently, I started using JQuery mobile to create a mobile website for a local restaurant. To add captions to the images in the menu, I found and utilized the Mosaic JQuery plugin successfully. However, I encountered an issue with the alignment of images on the Android phone browser.

The picture above illustrates that the images are not centered, having margins on the left (blue) and right (red).

Here is the current code:

(HTML)

<div data-role="main" class="ui-content" align="center" >
  <div class="hh">
   <h2><br>Delicious Meals to taste!</h2>
  </div>
    <div class="mosaic-block bar2">
        <a style="left: 0px; bottom: -50px;" href="maindish.html" target="_blank" class="mosaic-overlay">
            <div class="details">
                <h4>Delicious Main Dishes inside</h4><br>
                <h6>UCLM Restaurant (photo credit: Dan Deroches)</h6>
            </div>
        </a>
        <a href="maindish.html">
        <div style="display: block;" class="mosaic-backdrop"><img src="images/maindish/Rosemary-Chicken-Kabob.jpg"></div>
        </a>
    </div>

    <div class="mosaic-block bar2">
        <a style="display: inline; left: 0px; bottom: -50px;" href="maindish.html" target="_blank" class="mosaic-overlay">
            <div class="details">
                <h4>Delicious Main Dishes inside</h4><br>
                <p>UCLM Restaurant (photo credit: Dan Deroches)</p>
            </div>
        </a>
        <a href="maindish.html">
        <div style="display: block;" class="mosaic-backdrop"><img src="images/maindish/Rosemary-Chicken-Kabob.jpg"></div>
        </a>
    </div>

</div><!--content-->

(CSS)

.mosaic-block {

float:left;
position:relative;
left:50%;
overflow:hidden;

width:400px;

height:250px;

margin:0px;

background:#111 url(../img/progress.gif) no-repeat center center;

border:1px solid #fff;

-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

I attempted to use 'align-center' on each div but it did not work. Any suggestions?

androidjqueryhtmlcssjquery-mobile

Answer №1

To start, let's remove the 15px padding on the ui-content div in jQM and set it to zero:

.ui-content{
    margin: 0;
    padding: 0;
}

Next, instead of aligning the content div to center, let's align the header like this:

.hh {
    text-align: center;
}

Lastly, let's use auto margin on the mosaic blocks to center them:

.mosaic-block {
    position:relative;
    overflow:hidden;
    width:400px;
    height:250px;
    margin:10px auto;
    background:#111;
    border:1px solid #fff;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

Check out the DEMO here.

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

Is there a way to programmatically display an edit text field on an HTML page?

Currently, I have a straightforward task which involves pulling data from a MySQL database to display in an HTML table. Here is the current script: <html> <body> <table border='1'> <?php mysql_connect('url',&ap ...

phpjavascriptjquery

Unable to retrieve table information from HTML source code using Python and Selenium

In my endeavor to gather the odds data from this particular source, I am specifically focused on the "Over Under" segment and the over/under odds provided by Pinnacle and AsianOdds, which are accessible through the "compare" button. Here is an image descr ...

pythonhtmlselenium

What is the best way to simulate the behavior of File.copyTo using Mockito and Kotlin?

To put it simply, I have a File object that will trigger the copyTo method. I am also in search of a mocking technique that is equivalent for File.inputStream For the unit test, all I want is a mock file where the copyTo call does nothing or is verified a ...

androidkotlinmockitomockk

What is the best way to showcase specific information from a JSON file with the help of

Our corporation is looking to showcase job listings that we promote on a prominent job platform. They provide us with JSON data so we can exhibit our company's job openings on our website. I aim to present essential information in a summary format, w ...

javascriptjqueryhtmljson

I am looking to implement an animation that automatically scrolls to the bottom of a scrollable DIV when the page is loaded

My DIV is configured with overflow-y set to scroll. .scrolling-div { width: 85%; height: 200px; overflow-y: scroll; } If I have an abundance of content within this div, my goal is for it to automatically scroll to the bottom upon loading the page. I am ...

javascriptjquerycss

Conceal flexbox item depending on neighboring element dimensions or content

I've encountered an issue while using a flexbox to display two elements side by side. The left element contains text, while the right one holds a number. When the value in the right element has at least 7 digits ( > 999,999 or < -999,999), I ne ...

javascriptcssangularjsflexbox

What is the process for inserting information into an XML ListView?

Recently, I embarked on my journey to learn Android development and am currently working on creating a basic view that includes a ListView in the main XML file. Take a look at my main.xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...

javaandroidxmllistview

What is the best way to attach events to buttons using typescript?

Where should I attach events to buttons, input fields, etc.? I want to keep as much JS/jQuery separate from my view as possible. Currently, this is how I approach it: In my view: @Scripts.Render("~/Scripts/Application/Currency/CurrencyExchangeRateCreate ...

jqueryasp.net-mvctypescript

Invokeing JQ's on() function to trigger a click event on a concealed Google Infobox.Js

I'm currently using the Infobox.js plugin from Google API V3 to show custom info windows. However, I've encountered an issue where the infobox.js code hides each marker's info window and brings it to the front using z-index. Is there a way ...

jquerygoogle-mapshiddeninfowindow

Styling Forms with SPAN Text in Place of Input or Select Controls

My current CSS is specifically designed to format labels above form input elements, but I am facing an issue when trying to replace the inputs with text from a database for displaying read-only data. Despite my efforts, changing the input fields to a span ...

asp.netcssformsstyling

Issue with aligning bottom in ConstraintLayout when using ImageView with varying sizes

I'm trying to align different sized ImageViews at the bottom in a ConstraintLayout. The first image is sized at 100x140: https://i.sstatic.net/GSZJE.png The second image is sized at 206x316: https://i.sstatic.net/Dv2Fg.png Here's the initial X ...

androidandroid-layout

Incorporated asynchronous functionality, struggling to integrate it into the code

Previously, I used to utilize the following code for handling state: //get state MyClass.prototype.getState = function(key) { var value; switch(this._options.type){ case "cookie": value = $.cookie(key); ...

javascriptjqueryajax

Incorporating @font-face webfonts into a Jekyll project

I'm currently working on incorporating webfonts into a Jekyll build. Interestingly enough, the fonts show up perfectly fine when I view them locally, but once I push my project to a live environment, the fonts mysteriously disappear. To make matters w ...

htmlcssfontsjekyllwebfonts

comparing caching with jquery deferred against promise

Currently, I have implemented code using jQuery Deferred and ajax to fetch data from a remote API, store it in localStorage, and retrieve it from there. However, this code has a bug where it doesn't display the data properly the first time it runs (re ...

javascriptjquerycachingpromisejquery-deferred

Issue with Android date input field not resetting the value

When testing in Android Tablet (version 4.1.2), I encountered a strange issue with an input date field that looks like this: <input type="date" value="2013-06-10"/>. Upon clicking on the field and trying to set a new date, instead of replacing the o ...

javascriptandroidhtmldatepicker

Unable to access Google Maps and GPS location on my Kindle Fire

There are a couple of things I am curious about and would like some answers. Can anyone help? Is it possible to locate the GPS location of a device on the new Kindle Fire? I did some research a few days ago and my client believes that GPS is now supp ...

androidgoogle-mapsdictionarykindle-fire

What is the best way to ensure that TwentyTwenty.js images are always positioned in the

Looking to utilize the TwentyTwenty.js code for image comparison, but facing an issue where the images are aligned to the left side. Is there a way to keep them centered without explicitly setting the width on the container? <div id="beforeafter" class ...

jquerycsstwentytwenty

Is your PHP, MySQL array not displaying properly in a single HTML table despite multiple queries being made?

I found a code snippet on this website, which I utilized as shown below $data = array(); while($row = mysql_fetch_assoc($num1)) {$data['row'][] = $row;} while($row = mysql_fetch_assoc($num2)) {$data['row2'][] = $row;} $count = ...

phpmysqlarrayshtmlmultidimensional-array

Counting JQuery Classes in an HTML Document

My task involves creating a dynamic HTML form that allows users to enter card values, which are then counted and styled accordingly. Each set of cards is contained within a <section> element. However, I encountered an issue with my jQuery code where ...

javascriptjqueryhtmlcss

Display a list exclusively with radio button options

Currently, I am developing a module that allows the admin to view a list of candidates who have requested approval. The interface includes radio buttons for three different selections and a submit button. However, I would like to update this functionality ...

javascriptphpjquerymysqlajax