How to position an image at the center in jQuery Mobile

I'm currently struggling to center an image in jQuery mobile using CSS. Despite trying various styles, the image refuses to budge from its original position. I even went to the extremes with my CSS to see if it would have any effect on the image, but nothing changed. I attempted to add a class directly to the image and align it to the center, but that also proved unsuccessful.

Snippet of HTML code:

<div class="me">
    <h2 class="name">John Doe</h2>
    <img src="MyPic1.jpg" alt="My Photo" height="200px"/>
    </div>

CSS applied:

.me {
   text-align: center;
   padding-left: 50px;
   margin-left: 100px;
}

Answer №1

Have you attempted to modify your CSS with the following code:

.me img{text-align:center;
padding-left: 50px;
margin-left: 100px;}

It's possible that simply adjusting your CSS could resolve the issue. You might want to consider using position: relative and then setting left: 0; right: 0; along with text-align: center;

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

Set the userID variable as the assigned value and the username variable as the ng-model attribute for a select

Seeking assistance with a coding dilemma. Currently working on an ASP.Net MVC and AngularJS application, where I am utilizing the select tag to display a list of users. Both the select tag and a div are connected via the same ng-model for real-time binding ...

Display the content as a clickable link using Jquery

Here is the view I have created using .NET MVC3: function DisplayingGrid () { var Geo=$('#ddlGeo').val(); var Vertical=$('#ddlVertical').val(); var Month=$('#ddlMonth').val(); if(Vertical=="All") { var Flag=1; ...

Looking to ensure that a div with no content adjusts to the height of the neighboring div?

Currently working on a Reactjs project. I'm trying to set the height of the colorTab div to match that of the content div, while making it responsive. The height of content should adapt dynamically based on the text content in title and description, w ...

Jquery div mysteriously disappearing without explanation

I need some help with my image options. Whenever I hover over the image, the options appear below it. However, when I try to move down to select an option, they disappear. I have configured the slideUp function so that it only happens when the user moves a ...

How can you create a blurred effect on a navbar?

Looking to achieve a unique blur effect in the background of my navbar component. The standard CSS blur effect isn't giving me the desired result, so I'm seeking some guidance on how to customize it. For example: https://i.sstatic.net/bPEXZ.png ...

Please click on the element located in the top right corner of the image

I am attempting to place a font icon in the top right corner of some images, with the intention of only triggering an event when I click on the icon. However, my current setup causes the entire image to trigger the click event. How can I restructure this t ...

Use jQuery and AJAX to update the current HTML content only when the image has finished loading

I am attempting to load a .php file that contains a 2Mb image into a specific div. While I can make this work with ajax, my issue is that I only want the content of the current div to be replaced with the new one once the image finishes loading. Currently ...

using javascript to retrieve php variables

After creating a webpage, setting up Apache2 on an Ubuntu server to access it over the internet, and installing PHP5 and MySQL, I encountered issues with accessing database information on my page through a .php file. Despite having a file named test.php th ...

PHP Multiple Filter Options

Currently, I am developing a filtering system for a mySQL database that utilizes dropdown menus. While the system functions correctly when using one filter, I am encountering difficulties in stacking multiple filters. To achieve this, I am retrieving the c ...

Overlap with upper picture formatting

I've been struggling to create an ion-card with two images: a main picture and a small book cover. Any ideas on how to achieve this? Note: The layout should have 2 images, one at the top and another as a small book cover. Check out this sample on St ...

An easy way to switch animations using CSS display:none

Dealing with some missing gaps here, hoping to connect the dots and figure this out. I'm attempting to create a functionality where a div slides in and out of view each time a button is clicked. Eventually, I want multiple divs to slide out simultane ...

Changing the appearance of a radio button dynamically upon clicking

I am currently working on a dynamic pickup date form that utilizes radio buttons. My goal is to change the style of the selected value when a user clicks on it. Below is the code I have tried, but it has not been successful: foreach ($period as $day){ ech ...

Disregard the Margin of Ancestor Elements

I'm attempting to make an image span the full width of a parent element, but the parent element has a margin of 10px. This means that when I apply #parent img { position: absolute; top:0; left:0; height: auto; width: 100% } It on ...

Using jQuery to change the `class` of the parent `div` based on the length of a `p`

I am attempting to adjust the height of a parent div based on the length of text in its child p.descr. This is achieved by adding a specific class that corresponds to different height values in CSS. Below is the jQuery code snippet: $(document).ready(fu ...

What are the best methods for creating a significant gap in a flexbox layout?

https://i.sstatic.net/iMkPt.png I created a menu using flexbox to have only two columns and vertical scrolling for multiple menus. However, I am facing spacing issues between the menus when one menu has many children. Here is the code snippet along with t ...

CSS dropdown fix for improved responsiveness

Check out this Fiddle >> http://jsfiddle.net/fpCpc/`"> jsfiddle Having a problem where the top part of the dropdown navigation doesn't stay active when scrolling down. I even captured a screenshot for clarification! Screenshot Any tips or ...

Adjust the content column in the form to be mobile-friendly

Currently, I am coding in PHP and using Bootstrap. In my project, there are two columns - the LEFT column displays text, while the RIGHT column contains a form: Presently, when viewing on desktop, both columns are visible. However, on mobile devices, ...

jQuery's query yields a NULL result

y.html: <h4> Modified: <span id="link-modified"></span></h4> --> Date is not displayed jQuery: var modified_date = new Date((data.modified)*1000); --> data.modified is in UNIX timestamp $('#link-modified').text(mo ...

Can you explain the purpose of using the "overlay" value in the "overflow" property?

Can someone please clarify the distinction between "overlay" and "auto" for me? Is the function of "overlay" similar to that of "auto"? ...

Is it possible to use Javascript to automatically calculate the number of characters in a form input box and then populate the form quantity input

I have successfully created a JavaScript function that counts the characters in a TextArea and displays the result in another TextArea. Now, I am faced with the task of adapting this function to work within an existing shopping cart form, where it is curr ...