Ways to center image in div container

I have a responsive popup that I've created and I want to show an image in the center of the div. However, when I resize the screen width, the image remains pinned at the top of the div.

https://i.sstatic.net/vMHbg.png

     <div class="row">
      <div class="five columns">
       <img class="imga" src="images/warning.png">
      </div>
      <div class="seven columns">
       <p style="color:#e57a2a; font-size: 150%; text-align: center; line-height: 1.1;"><b> We apologize, but home delivery service is currently not available in this area </b></p> 
       <p style="color:#20540D; font-size: 120%; text-align: center; line-height: 1.1;"> We invite you to place your order for store pickup at our restaurants</p> 
       <center><button style="background-color:#e57a2a;color:white; border:none; height:35px;">order now </button></center>
      </div>
    </div>

.imga{
max-width:100%; 
position: relative;
margin:auto;"
}
htmlcss

Answer №1

To ensure the image is positioned in the center across different browsers, include the following code with a relative position:

<center>your image</center>

Additionally, apply a media query to the columns class so that its display property is set to block instead of table-cell for relative positioning.

<div class="row">
  <div class="five columns">
    <center><img class="imga" src="images/warning.png"></center>
  </div>
  <div class="seven columns">
   <p style="color:#e57a2a; font-size: 150%; text-align: center; line-height: 1.1;"><b> Sorry, home delivery service is currently not available in this area </b></p> 
   <p style="color:#20540D; font-size: 120%; text-align: center; line-height: 1.1;"> We invite you to place an order for in-store pickup at our restaurants</p> 
   <center><button style="background-color:#e57a2a;color:white; border:none; height:35px;">order now </button></center>
  </div>
</div>
<style>
@media all and (max-width:768px){
.columns {
display:block;
position:relative;
}
}
</style>

Edit:

I apologize for my misunderstanding earlier. If you want the information icon to remain where it is but be centered within its current div, use the following styling:

<style>
.columns {
display:table-cell;
vertical-align:middle;
}
.row {
display:table;
position:absolute;
height:100%;
}
</style>

Answer №2

To ensure your columns are aligned in the center, convert them into divs with table-cell display and set vertical alignment to middle.

.columns{
    display:table-cell;
    vertical-align: middle;
}

Answer №3

<div class="row">
      <div class="five columns">
       <img class="imga" src="images/warning.png">
      </div>
      <div class="seven columns">
       <p style="color:#e57a2a; font-size: 150%; text-align: center; line-height: 1.1;"><b> We apologize, but home delivery service is not currently available in this area </b></p> 
       <p style="color:#20540D; font-size: 120%; text-align: center; line-height: 1.1;"> We invite you to place your order for pick up at our restaurants</p> 
       <center><button style="background-color:#e57a2a;color:white; border:none; height:35px;">order now </button></center>
      </div>
    </div>



<style type="text/css">
.imga{
margin-top:0px auto;
}
  .five{ text-align:center}
</style>

Experience it

Answer №4

.imga{
  max-width:100%; 
  position: relative;
  margin-left:auto;
}

Update the margin property

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

"Font Awesome icons are only visible online on the -dev website, not visible anywhere

I followed the recommended steps on Fontawesome's official site to install the fontawesome library. I used the following command: npm install --save-dev @fortawesome/fontawesome-free For production purposes, I included the following code in my index ...

cssangularfont-awesome

Compel the system to handle the file as if it were an

I am currently showcasing programming files on a website in plain, raw text format. I have now decided to implement syntax highlighting using HTML. While it has enhanced the appearance and functionality of the files, there is one issue - I need to create a ...

html

Update D3 data, calculate the quantity of rows in an HTML table, and add animations to SVGs in the final

Attempting to update data in an HTML table using D3 has proven to be quite challenging for me. My task involves changing the data in multiple columns, adjusting the number of rows, and animating SVG elements in each row based on new data arrays. Despite tr ...

javascripthtmld3.jssvg

How to Implement Angular Masonry with AngularJS?

I'm working on a layout that utilizes the passsy extension for angular masonry. <masonry column-width="200"> <div class="masonry-brick" ng-repeat="data in comments"> <div ng-switch on="data.type"> <div ng-swit ...

cssangularjsjquery-masonryjquery-isotope

Failing to hide a div on hover: Hoverintent's shortcomings

When I hover over the div with the unique identifier id="navbar", it doesn't seem to trigger any actions. I have included the following script in my document head: <script type="text/javascript" src="https://ajax.googleapi ...

javascripthtmljqueryhoverintent

Encountering a problem while attempting to save a scss file in Visual Studio Code

As a beginner in using sass, I decided to utilize the node-sass NPM package for compiling scss files into CSS format. Upon saving the file, I encountered the following error: { "status": 3, "message": "Internal Error: File to ...

cssnpmvisual-studio-codesass

Implementing a watermark on a website - design and structure

I have a question regarding the addition of watermarks to web pages, such as using the logo of an internet provider. I'm not specifically looking for HTML or CSS code samples. One idea I had was to use a proxy server that would automatically add water ...

csshttpshtmlwatermarkproxy-server

Adjustable image scaling with dynamic maximum height

Instead of trying to explain the problem I need to solve, let me show you an example for better clarity (apologies to mobile users, this may not work...) You can observe the effect I am aiming for on VICE news () While resizing the browser, notice how th ...

htmlcssimageresponsive-designscaling

What's the best way to use a single tag with a class to replace multiple nested blockquote tags

I have a collection of messy HTML files filled with repeated blockquote tags used to showcase lines of poetry. For example: <blockquote><blockquote>roses are red</blockquote></blockquote><br> <blockquote><b ...

pythonhtmlbeautifulsoupblockquote

problems arising from the alignment of floating divs

I am struggling with aligning the image "logo.jpg" in a left-floated div. How can I center it both vertically and horizontally within the code below? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm ...

css

ngStorage - Revert to original settings

In my web application, I am relying on ngStorage for storing data. Here is the snippet of code that I am currently utilizing to verify if the $localStorage object has been defined: if ( angular.isDefined($localStorage.settings) ) { $scope.app.setting ...

htmlangularjsng-storage

Displaying maximum number of items in each row using ngFor

Is there a way to automatically create a new row within the 'td' element after the ngFor directive has generated 10 image repeats? Currently, all the images are displayed in a single td and as more images are added, they start to shrink. <td ...

cssangularhtml-tablerepeat

Challenges arise when combining JQuery Mobile with Knockout and CSS Styles

Working with html5, JQuery Mobile and KnockoutJS. I've created a foreach template to display a grid-like GUI from an observable array. The issue arises when new items are added to the array - the styles are not applied correctly to these new items. T ...

cssjquery-mobileknockout.js

The HTML element in the side menu is not adjusting its size to fit the parent content

Update: What a day! Forgot to save my work... Here is the functioning example. Thank you for any assistance. I have set up a demo here of the issue I'm facing. I am utilizing this menu as the foundation for a page I am developing. The menu is built ...

jqueryhtmlcsstwitter-bootstrap

IntelliJ IDEA alerted me to an unidentified HTML tag: mat-card

From the images provided, it is evident that I am facing a tag inspection problem in my IntelliJ IDEA. Specifically, the issue arises from having Angular component codes embedded within an HTML file. ...

htmlangularintellij-idea

Set a variable equal to the innerHTML

Although I am not very familiar with JavaScript, I am looking to generate HTML table TD elements dynamically using JavaScript. Unfortunately, the code I have written is not functioning correctly. <script type="text/javascript"> function changed(num) ...

javascripthtmldynamic

Issue with jQuery not successfully changing a div's id multiple times

I've been attempting to switch a div's id when it is clicked by the user. The first click successfully changes the div's id, but subsequent clicks do not change the id back.... $("#hello").click(function(){ $(this).attr("id","bye").text ...

jqueryhtmlclick

how can you make keyframe animation pause at the last stage?

Here is an example of utilizing CSS animations: .show-left-menu { -webkit-animation-name: leftSidebarAni; -webkit-animation-duration: .25s; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; } @-webkit-keyframes l ...

css

What methods can be used to identify the css properties that are overriding ReactJS component styles?

:) I've been working on creating a website for some time now, and I decided to incorporate a react-calendar component from this link. Initially, when the page was simpler, it worked perfectly as intended and displayed like this based on the example p ...

javascriptcssreactjs

Detach a JQuery drag and drop element from a location without removing or concealing it

Currently working on a project that involves moving divs into a designated area, resizing them to fit the area, and then snapping them into place. Encountering an issue where when bottom items are removed from the area, they seem to "jump" up on the scree ...

javascriptjqueryhtmlcssjquery-ui