How to Align an Image in the Center of a DIV Even if the Image is Larger Than the

Having trouble with aligning images of different sizes in a DIV.

I found a solution on StackOverflow (How to vertically align an image inside div) that uses a <SPAN> as a dummy element with vertical-align: middle. It works well for resizing larger images, but they end up being displayed below the DIV.

If I take out the <SPAN>, the horizontal alignment works but not the vertical alignment.

If there's a simple change I can make, I'd prefer to keep the simplicity of this solution.

You can see tests at:

cssimagehtmlalignmentcenter

Answer №1

You can try using this solution:

<div id="modalBox" style="display:flex">
   <div id="imageContainer" style="display:flex; align-items:center">
      <img id="picture" src=".........">
   </div>
</div>

Answer №2

To ensure consistent display of images, it's recommended to set maximum width and height values for them. Simply apply relative positioning to the images within a div that has a relative position. Here’s an example:

<div style="height: 300px; width: 300px; position: relative; text-align: center;>
<img src="#" style="max-width: 200px; max-height: 200px; position: relative; top: 50px; />
</div>

With this method, all images will be aligned vertically and centered inside their respective div containers. Setting max height and width ensures that the image maintains its original aspect ratio.

Answer №3

@mcl hey there! Have you found a solution to your issue yet?

If not, take a look at my recent blog post about centering large images in smaller containers, where I also have a codepen demo included.

I faced the same problem and was able to fix it without using any javascript or inline styles.

Hope this information proves useful to you!

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

The text in the image caption has been drastically reduced along with the size of the image

Currently, I am dealing with the following code: <div style="min-width: 1000px;"> <p> Some text </p> <div class='div_img_left'> <img src="images/sth.png" alt="missing image" style="max-width ...

htmlcss

Personalizing list elements with SVG symbols

I have been experimenting with customizing the bullet points of an unordered list in HTML by using icons that I sourced from various websites. Here is the SVG code for the first icon, which is stored in home.svg: <svg xmlns="http://www.w3.org/2000/sv ...

htmlcsssvg

Is there a way to utilize JavaSript to emphasize the current date in a table containing a date column with various values?

I have a static table that looks like this: <table> <tr><td> Item 1 </td><td> 2021-06-01 </td></tr> <tr><td> Item 2 </td><td> 2021-06-01 </td></tr> <tr><td> ...

javascripthtmldatetimebootstrap-4html-table

How can I successfully store multiple file uploads and additional data simultaneously within a single form using php, jquery, and mysql?

Check out this form View From <form class="form-horizontal" role="form" id="frm_bulletin_board" method="post"> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Title <font sty ...

phpjqueryhtmlmysql

Using select2 for jQuery with ASP.NET incorporating images

I have successfully integrated a jQuery Select2 webform, but now I want to add another dropdown with dynamic image paths. Scenario 1: Dropdown with a static number of fields and known images with specific image names. <asp:DropDownList runat="server" ...

jqueryasp.netimagedropdownjquery-select2

A guide on extracting the image source from a string using Selenium in Python

I recently came across a Google search result that looks something like this: div class="rc" h3 class="r" <a href="somelink"> <img id="idFOO" src="data:somethingFOO" style="..."> </a> My goal is to extrac ...

pythonimageseleniumsrc

Looking to implement a CSS effect that will hide content without removing the space it occupies on the page?

Is there a way to hide specific buttons within the right column of a 3-column table display? I am currently utilizing jQuery to achieve this function. The purpose behind hiding these buttons is to prevent any quick clicks that might interfere with the fa ...

javascriptjqueryhtmlcsshide

Ensure that the text input box is positioned at the bottom of the chatbox and enable scrolling

Is there a way to make the textbox stay fixed at the bottom of the chatbox, regardless of how many messages are present? Currently, it appears after the last message. Additionally, I would appreciate assistance in implementing a scroll feature that automat ...

javascripthtmljquerycss

Converting Django templates with HTML and CSS into downloadable PDF files

Struggling to convert HTML & CSS into a downloadable PDF page using Django and Weasyprint. The current tutorial isn't working as expected - I need the PDF to render the current page when the user clicks on the download button, automatically downloadin ...

javascripthtmlcssdjangobootstrap-4

How come my function does not properly update the visibility of the elements with each subsequent call?

I am currently implementing form validation and updating the display of a notification based on the status code received from an http request with the following code: function checkValidEndpoint() { var xmlHttp = null; var myurl = "/restyendpoint/ ...

javascripthtml

I envision my home page being divided into two visually stunning full-screen sections, each taking up the entire height of the page

I am currently working with the code shown below. It successfully displays the first part in full height, regardless of resolution, but once I scroll to the second half, there is a large empty gap. How can I eliminate this gap and make the transition smoot ...

htmlcssviewport-units

Issue with compiling Tailwindcss in nextjs JIT mode

Our current project involves using tailwindcss and things were going smoothly until the clients requested a "pixel perfect" design. This meant that every element needed to be set in pixels instead of rem units. Instead of adding countless classes like h-1p ...

cssreactjscompilationnext.jstailwind-css

Trigger file upload window to open upon clicking a div using jQuery

I utilize (CSS 2.1 and jQuery) to customize file inputs. Everything is working well up until now. Check out this example: File Input Demo If you are using Firefox, everything is functioning properly. However, with Chrome, there seems to be an issue se ...

javascriptjquerycssfile-upload

Tips for utilizing the <img src> tag within Google Apps Script

I am trying to incorporate an image into a google apps script using the src attribute. I have specified the folder id and path, but unfortunately the image is not displaying as expected. The folder has been shared here for reference. Any assistance with t ...

htmlgoogle-apps-script

Tips for matching the width of tooltips with the length of the title

I am trying to adjust the width of the antd tooltip to match that of the title. Here is the code snippet: <Tooltip placement="top" align={{ offset: [0, 10] }} title='this is the title'> <span>tooltip</span> </T ...

javascriptcssreactjstooltipantd

Building Valid HTML Strings with Qt4.2's QTextEdit

My goal is to create HTML content to display correctly in a QTextEdit using Qt 4.2 on RHEL 5.3. Although I am not a professional web developer, I believe the HTML generated by my algorithm is valid. 319:14:27:22: <font color="rgb(255,0,0)" bgcolor="r ...

htmlqtqtextedit

CSS causing unexpected behavior in image slider

I am facing an issue with incorporating a code for an image slideshow into my website. The current CSS is causing the slideshow to malfunction. Without the slideshow code in the CSS, the image appears correctly on the screen and changes its source every 2 ...

htmlcssslideshow

Creating a unique HTML design with Django Allauth

While there is no shortage of information on the topic, such as this thread and this one, I haven't been able to find a resource that explains it in a way that even a 5-year-old or a designer could grasp :) I only have knowledge of HTML and CSS, and ...

htmldjangodjango-allauth

Is it possible to construct an IFrame using URL parameters?

Looking to implement an iframe that displays a page provided as a parameter in the URL using ASP.NET MVC4. Here's the approach I have in mind: Updated the code but it still doesn't seem right to me. <?php if(!isset($_GET['link'] ...

phphtmlasp.net-mvc-4

Scraping Data: A guide to extracting width values from CSS style tags using Scrapy and CSS selectors

I've recently started learning scrapy and I'm struggling to extract the width from a div using a CSS Selector. No matter how hard I try, I can only find solutions using xpath instead of css selectors. Here is the HTML code snippet: <div clas ...

csspython-2.7css-selectorsscrapy