Struggling to properly align a dynamically changing image in the center

I am struggling to vertically center an image on my webpage. Since I don't know the dimensions of the image beforehand, my only options are using tables or css tables.

Even after trying to use css tables, I still can't seem to get the image centered vertically.

This is how my HTML looks like:

<div class="image">
    <div class="table">
        <div class="table_row">
            <div class="table_cell">
                <img src="https://pbs.twimg.com/profile_images/3560817062/a9bda79c4d2bfc3353a4fbc0a14e6080.jpeg" alt="Main Image">
            </div>
        </div>
    </div>
</div>

Here's the CSS code I have used:

.table {
    display: table;
    margin: 0px auto;
}

.table_row {
    display: table-row;
}

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

.image {
    width: 411px;
    min-width: 411px;
    max-width: 411px;
    height: 341px;
    min-height: 341px;
    max-height: 341px;
    background-color: #f6f6f6;
}

.image img {

}

You can view a live demo on: http://jsfiddle.net/5DLuU/

Can anyone point out what I might be doing wrong in this setup?

Answer №1

To address the alignment issue, it is not necessary to use a <div> for table-row. You can simply utilize the table-cell. To resolve the alignment problem, apply height:100% to both the table and table-cell elements:

.table {
    height:100%;
    display: table;
    margin: 0px auto;
}
.table_cell {
    height:100%;
    display: table-cell;
    vertical-align: middle;
}

You can view a demonstration of this solution in action on Demo Fiddle.

Answer №2

To achieve vertical centering and adjust line height, you can utilize the following code:

CODE SNIPPET:

<div class="picture">
    <img src="https://example.com/image.jpg" alt="Main Image"/>
</div>

CSS STYLES:

.picture
{
    background-color: #f6f6f6;
    width:400px;
    height:400px;
    line-height:400px;
    text-align:center;
}

.picture img
{
    vertical-align:middle;
}

Answer №3

One issue is that the height of your table does not fully extend to the outer div. Consider assigning a set height to rectify this.

.table {
    display: table;
    margin: 0px auto;
    height:400px;

}

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 issue of the color CSS rule not being applied to the button element when transitioning from disabled to enabled on browsers like Safari 14+ is a common challenge

There seems to be an issue with frontend form validation code affecting the disabled attribute of a submit button within a form. Two different css rules are applied for the enabled and disabled states, including changes in the text color of the button ele ...

Disappear solely upon clicking on the menu

Currently, I am working on implementing navigation for menu items. The functionality I want to achieve is that when a user hovers over a menu item, it extends, and when they move the mouse away, it retracts. I have been able to make the menu stay in the ex ...

What is causing my CSS grid to malfunction in Chrome, when it is functioning properly in every other browser?

I've configured a CSS grid with 3 columns to showcase our portfolio. I managed to find code that works for Firefox, Internet Explorer, and Safari. However, in Chrome, the grid isn't displayed properly - all the images are stacked below each other ...

Tutorial on wrapping HTML content in a CDATA tag using jQuery

Is there a way to enclose some HTML in an element using a CDATA tag to "sterilize" it, so to speak? I've attempted to do so using the following code: $(this).html( "<![CDATA[" + $(this).html() + "]]>" ); However, this approach simply encodes ...

Is it possible for the scroll event to be triggered while scrolling only when a div element is used?

While utilizing window.onscroll to track scroll events during scrolling, I noticed that in certain Android devices the scroll event is only triggered after the scroll has completed. However, when monitoring scroll events within a specific div element, it ...

Unable to hear sound - JavaScript glitch

Spent countless hours trying to figure this out - Can't get the audio file to play when clicking an HTML element. var sound = document.querySelector(".soundfile"); function playAudio() { sound.play(); } document.querySelector(".btn-hold").addE ...

Choose a single SVG file based on its unique ID

Looking for some guidance - I have a vector file with 40 svgs all combined into one image. Each vector is identified by an id inside the <g> tag. How can I select a specific svg from this single file without choosing the entire image in html? PS: E ...

Transferring HTML information to Flask

I'm struggling with passing a value from a text box in a web application to a Flask application. Despite my efforts, the request object in Flask does not seem to contain the data I need. Can anyone provide assistance with this issue? Below are the rel ...

Managing information in a fresh window from the main source

I'm looking to use the window open() function to display a default calibration image initially Then have the ability to switch out images from a gallery on the parent page whenever needed My coding skills are a bit rusty, and I'm struggling to ...

Having trouble showing images in Angular 9?

Currently, I am working on Angular and facing an issue with displaying the avatar of an article that was posted during registration. The image is not appearing correctly. In the HTML code: <ng-container *ngIf="blogpost$ | async as bp; else loading"> ...

tips for maintaining text size without affecting the layout of surrounding elements

https://i.sstatic.net/xQLFr.png I need to align the content of two divs in the same location, but the length of text in the first div is affecting the positioning of the body content. This is causing the two divs to look different. I want the body content ...

The jQuery toggle functionality seems to be malfunctioning

I have created a form that should toggle (hide and show) with the click of a button, but for some reason it's not working. Can someone please take a look at my code below and let me know what I'm doing wrong? $(document).ready(function () { ...

Modify the pseudo element when a different class is active

I've encountered an issue while attempting to modify the after pseudo element when the .active class is applied. Despite my efforts, it doesn't seem to be functioning as intended. My current project setup involves using scss with Vue. I have tri ...

Techniques for Adding Background Color to Fieldset Border

Recently starting to learn HTML and stumbled upon a question: How can I create a background color or image for a field set border? Can I simply use regular color values, or do I need special codes for creating a background color in a field set? Any insig ...

JavaScript: Issue with triggering form submit event

I'm facing an issue with getting the submit event to trigger on my form. I've added a submit button to the form and have included a script at the end of the body that references the necessary JavaScript functions for the form, but it's still ...

What is the best way to display multiple canvases on one page?

Is it possible to draw multiple canvases in a single page using this code? I have successfully drawn a single canvas using the provided code. For each canvas, I have different y data and I need to display 6 canvases per page. How can I achieve this on a ...

Adding a Div in Front of a Div with a Left Value of Zero

Attempting to insert a new Div before another Div with a left value of zero has resulted in the new Div replacing the position of the original Div with a left value of zero. Essentially, the newly inserted Div now has a left value of '0'. Below ...

Align title text to the right within the Material Design Card

I have implemented a Material Design (MDL) card to showcase numeric values in the title. However, I am facing an issue where the values are left aligned by default and I want them to be right aligned. Despite trying various styles, they are being ignored ...

Responsive transparent triangle with full-width vertical orientation

I have come across numerous discussions on stack overflow regarding triangles, but most of them focus on small horizontal triangles which is not what I require. What I'm looking for is a triangle that meets the following criteria: Vertical Full wid ...

Large header bar positioned above navbar in Bootstrap 4 design

Is there a way to add a pagewide bar above the navbar that can disappear in mobile view? <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <div> Pagewide </div> < ...