What is the best way to center an image on a mobile-responsive website?

How can I center an image on mobile devices using responsive design?

Here is the code from my index.html file:

    <div class="iteams">
<div class="width8 os-animation" data-os-animation="slideInRight" data-os-animation-delay="1.5s"><h2>Our <br>products</h2> <img src="images/zig.png" alt=""/></div>
    </div>

Here is the code from my responsive.css file:

@media only screen and (max-width: 767px) {
.iteams h2{
    text-align: center;
}
.iteams img{
    margin 0px auto;
    text-align: center;
}

Answer №1

Adjust the CSS for the container div with the class .width8 to include margin: 0 auto; instead of modifying the image element (also, don't forget to add a closing } for the @media query)

@media only screen and (max-width: 767px) {
  .iteams h2 {
    text-align: center;
  }
  .iteams .width8 {
    margin 0 auto;
    display: block;
    text-align: center;
  }
}
<div class="iteams">
  <div class="width8 os-animation" data-os-animation="slideInRight" data-os-animation-delay="1.5s">
    <h2>our <br>products</h2> 
    <img src="https://placehold.it/100x100" alt="" />
  </div>
</div>

Answer №2

If you want to center an image, it's best to assign a width to the parent element. For example, in your situation:

.items{width: 100%;}

Answer №3

Here's a neat trick to perfectly center your image: instead of relying on margin: 0px auto;, you can utilize position: relative;, left: 50%;, and transform: translate(-50%); for optimal results.

@media only screen and (max-width: 767px) {
  .items h2 {
    text-align: center;
  }
  .items .width8 {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    display: block;
    text-align: center;
  }
}
<div class="items">
  <div class="width8 os-animation" data-os-animation="slideInRight" data-os-animation-delay="1.5s">
    <h2>our <br>products</h2> 
    <img src="https://placehold.it/100x100" alt="" />
  </div>
</div>

Answer №4

.products {justify-content: center; display: flex;}

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

I wish to simply click on a browser link without the need to open a new tab

Is there a way to programmatically open a link or all links on a website in the same browser without manual clicks or keyboard commands? Essentially, I am looking to automate the process of opening a specific link within a website without the need for an ...

Tips for enabling browser back and forward functionality in a one-page website design

Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...

Position the label and the select dropdown side by side within the sweetalert 2 component

Can anyone provide an example of aligning a label and dropdown in the same row using sweetalert2? I attempted to customize the label placement, but it appears on a separate line. I would like to log the selected dropdown item upon clicking the OK button. ...

Jekyll is detecting invalid XML entity references

My blog is powered by Jekyll and hosted on GitHub Pages. I've noticed that Jekyll sometimes incorrectly XML escapes a special character as &tt;. For example, in the RSS feed located at this link, the source XML: </p> <p> is transfo ...

Creating a Javascript countdown timer that does not involve displaying the

I stumbled upon this code on a website, but there's one tweak I'd like to make. Unfortunately, I can't seem to figure it out myself, so I'm reaching out for some help. What I want to achieve is removing the year from the date so that th ...

Contrasting border with border-style

To eliminate all borders from my primefaces panelgrid component, I employ the following techniques: First method: .table, table td { border-style: hidden !important; } Second method: .table, table tr, table td { border: none !important; } Can ...

Searching for the name of dynamically generated input fields using jQuery

I have a straightforward form featuring radio buttons <form> <input type="radio" name="radio_1" value="1" />Radio 1 <input type="radio" name="radio_1" value="2" />Radio 2 <input type="radio" name="radio_1" value="3" />Radio 3 </ ...

Tips for maintaining alignment of components within an Angular Material tab:

I am facing an issue with keeping items aligned properly. Initially, I had a form with two Angular Material lists placed side by side, each occupying 6 units and it looked good. However, when I tried to enclose these two lists within a material tab, they e ...

I'm receiving an undefined output, does anyone have any suggestions to fix this?

let userInput = prompt("Please input a month number"); let monthName; switch(userInput) { case 1: monthName = "January"; break; case 4: monthName = "April"; break; case 8: m ...

Start up JQuery User Interface

I've been having some trouble with Jquery UI and it's been quite frustrating. To try to understand better, I have created a simple test case which you can view here: http://jsfiddle.net/vmZap/ Essentially, I have included JQUERY, JQUERY-UI, and ...

JavaScript Popup prompting user on page load with option to redirect to another page upon clicking

Can a JavaScript prompt box be created that redirects to a site when the user selects "yes" or "ok," but does nothing if "no" is selected? Also, can this prompt appear on page load? Thank you! UPDATE: Answer provided below. It turns out it's simpler ...

JavaScript Accordion malfunctioning

I'm attempting to implement an accordion feature for each row of an HTML table using the script provided below HTML <table class="list" id="table" data-bind="visible: !loading()"> @*<table class="productTable" data-bind="sortTable:true" ...

Are HTML attribute names really case-sensitive? A topic filled with conflicting information

After learning that attribute names are case-sensitive, I found conflicting information. A source mentioned that attribute names are indeed case-sensitive. For example, the width attributes in <div> and <DIV> would be considered separate due ...

Combining Flask with npm: A Comprehensive Guide

I have a unique flask application that initiates with python3 app.py running on localhost:5000 Moreover, there is another distinct nodejs program that kicks off with npm run start which operates on localhost:3000 The challenge that lies ahead for m ...

What is the best way to consistently resize elements to the same pixel value, like "10px", using jquery-ui?

Is there a method to consistently resize a div element by a specific pixel value each time, such as "10px"? I am attempting to achieve this using jquery-ui, where I can resize the element but desire to resize it consistently by a set pixel value. $(child ...

Adding constantly changing information into unchanging HTML

My goal is to dynamically insert content from a Database into a static HTML file. I have successfully achieved this on the client side using JavaScript. Specifically, I need to retrieve values from the Database and place them in designated fields within t ...

``There seems to be an issue with the functionality of the href link

Currently, I am utilizing purecss to design colorful buttons on my website. However, I am encountering an issue where the href link is not clickable even though the button displays correctly. <button class='pure-u-1 pure-button pure-button-primary ...

Is there an issue with the padding not functioning correctly on smaller and medium-sized devices when using Bootstrap

On my desktop, I added '50px' padding to the body of my page and it's working properly. However, on smaller and medium screens, it's not functioning correctly. I tried using Bootstrap @media CSS functionality, but it still doesn't ...

What are some creative ways to customize and animate the cursor or caret within an input field?

Just to clarify, I am working with React and Material-UI. I have a task at hand where I need to modify the appearance of the caret within an input element by adding an animation to it. I have managed to change its color using caret-color and set a default ...

The error form is not responding even after attempting to locate the issue

I have created a form and it was working fine, but now when I click on the submit or reset buttons, nothing happens. I've checked my code thoroughly line by line, but can't seem to find the issue. I even tried restoring previous versions, but no ...