Aligning image both horizontally and vertically in the center

I need assistance with centering an image both vertically and horizontally inside a div. Here is the current structure:

CSS:

.imgWrapper {
    background-color: #000;
    height: 100%;
    min-height: 480px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    float: left;
}

.imgStg {
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 100%;
    min-height: 402px;
    position: relative;
    text-align: center;
    width: 100%;
}

.imgStg img {
    display: inline-block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    width: auto;
    text-align: center;
}

HTML: 

<div class="imgWrapper" style="width: 724px;line-height: 601px;">
    <div class="imgStg"> 
        <img src="http://placehold.it/500x300" style="width: 500px;height: 300px;"/>
    </div>
</div>

*Please note that the height of 601px is specified in a parent element

Despite my efforts, the image appears aligned to the top of the div when viewed on localhost in Google Chrome and Firefox. However, it displays correctly in the provided fiddle link. What could be causing this discrepancy?

Screenshot of the issue:

htmlcss

Answer №1

Height and line-height may seem similar, but they are not the same thing. Give this code a try:
CSS: 

.imgWrapper {
    background-color: #000;
    height: 100%;
    min-height: 480px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    float: left;

}

.imgStg {
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 100%;
    min-height: 402px;
    position: relative;
    text-align: center;
    width: 100%;
}

.imgStg img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

HTML: 

<div class="imgWrapper" style="width: 724px;height: 601px;">
    <div class="imgStg"> 
        <img src="http://placehold.it/500x300" style="width: 500px;height: 300px;"/>
    </div>
</div>

Answer №2

It appears that your CSS code is accurate. Have you double-checked to ensure that it is being loaded correctly on localhost? Some browsers may display an error if the HTML is loaded using the file:// scheme while referencing the CSS via http:// scheme. I recommend trying to reference your CSS file as "./style.css". This should align the browser's scheme with the HTML that is linking to it.

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

Encountering issues with CSS selectors when using Selenium WebDriver

I am encountering an error with the following code: elem = new Array() elem = driver.findElements(By.CssSelector('input')); What could be causing the issue in the code above? If I have an HTML form like this: <form role="form" method="post ...

javascripthtmlseleniumselenium-webdrivermocha.js

Animating a div's width with CSS from left to right

My goal is to create an animation effect for two overlapping divs that will reveal or hide the text inside them. I want one div to animate from left to right while the other animates from right to left, creating a wiping effect where as one piece of text d ...

cssanimation

Retrieve the text content within HTML tags that come after a specific paragraph using the DOM

I am looking to extract content from HTML documents. Specifically, I need the contents of all 'p' tags that come after 'h2' tags. Here is an example of the HTML to be parsed: <h1>Lorem ipsum</h1> <p> Lorem ipsum ...

phphtmldomdocument

Button in Bootstrap input group moves down when jQuery validation is activated

Check out my bootstrap styled form: <div class="form-group"> <label for="formEmail">User Email</label> <div class="input-group"> <select class="form-control" data-rule-emailRequired="true" ...

javascriptjquerycsstwitter-bootstrap

How to Manage Empty Lines in HTML Documents within WordPress

Just recently, I launched my brand new website. Everything seems to be functioning properly except for one issue that I discovered in the HTML source code. There are 15 blank lines before "<!doctype html>", which is causing some problems with SEO and ...

phphtmlwordpresswoocommerceblank-line

The logo on my header is being covered by the menu due to the CSS code

Check out my website at bee-barcelona.herokuapp.com I'm facing an issue where the menu overlaps with the logo when I resize the browser or view the webpage on a tablet. I want to fix this using CSS. What changes do I need to make to ensure that the e ...

htmlcss

The box shadow does not envelop the entire block uniformly

I have been struggling to evenly cover the shadows around all the blocks using CSS. Unfortunately, after working on it for 2 days, I still haven't been able to find a solution. The middle line seems to be misaligned and thicker compared to the others. ...

htmlcss

position the table next to the graph

I'm having trouble moving/placing items in HTML. Can we experiment with rearranging the tables as demonstrated at the bottom (expected output)? Is it feasible to achieve a layout like the one below? Shifting the bottom section up next to the plots. ...

htmlcss

Navigating the ins and outs of Bootstrap 4 grids

I am trying to create a layout with two columns, each using the class col-md-6. In both columns, there are six images. However, I want to have only one image displayed in the left column if the right column is empty. How can I achieve this? The current se ...

javascripthtmlcssbootstrap-4

Creating a text gradient in CSS with a see-through background

Picture for Inspiration Example of HTML Design <div class="Heading"> Raffle <span>EXTRAVAGANZA</span> </div> Tips While not required, adding a gradient would enhance the overall look. ...

htmlcss

Ways to choose a div element upon scrolling to it in the window

On my webpage, I have multiple divs containing posts. Each post is numbered based on its id like: <div id=post-id> I attempted to create a reading bar that expands when hovering over a post's div element similar to this example However, my ...

jqueryhtmlcssscroll

Pyramid structure with multiple layers in 3D dimensions

Is it possible to create a 3D multi-level pyramid using CSS and HTML5? I have explored some shape generator websites, but they are not compatible with IE and FF. For example: I also attempted to create a 2D multi-level pyramid, but it did not meet my req ...

htmlcss3d

Create a spinning 3D CSS3 element that rotates constantly

I recently created a unique two-sided element that smoothly rotates around the Y axis using the powerful CSS3 transform: rotateY() property, inspired by fantastic examples found at . While I have successfully made it rotate on hover or at specified interv ...

jquerycss3dtransformrotatetransform

Having difficulty retrieving certain hyperlinks from a webpage with BeautifulSoup

I am attempting to extract images from this webpage. The page contains numerous images that lead to different pages when clicked, and I aim to navigate through each and collect the images from the linked pages. To achieve this, my first step is to compile ...

pythonhtmlweb-scrapingbeautifulsoup

Guide on centering text vertically in Bootstrap 4

As I begin my journey with Bootstrap, I encountered a challenge while attempting to vertically align text. The issue arises when displaying a modal window from a partial view and trying to showcase an icon and a title in the header: Below is the page cont ...

cssbootstrap-4bootstrap-modal

Divs in jQuery smoothly slide down when a category is chosen

As I work on a large website, I have hidden div tags in my HTML that I want to be displayed when a user selects a specific category. However, due to the size of the site, there are many hidden divs that need to be revealed based on different categories sel ...

javascriptjqueryhtmlslidecategories

Fixing display flex with columns of percent width and 1px gap: A step-by-step guide

When displaying flex columns with percent width on a specific width, make sure to leave a 1px gap between them. Check out the screenshot here html, body { margin: 0; padding: 0; } * { box-sizing: border-box; } .wrapper { max-width: 1200px; p ...

htmlcssflexbox

CSS image cropping is a technique used to adjust the size

I have successfully created a grid of images with two columns, but I'm facing an issue with a portrait image disrupting the layout. I am looking for a way to adjust or "crop" the image so it matches the height of the landscape ones. I attempted to use ...

htmlcssimagecrop

Sending PHP URL parameters results in a 404 error page

I'm facing an issue with an image that is meant to redirect to another page when clicked, along with sending two variables - s and n. echo "<a href='../?change-preference&s=up&n=".$element."'> <img src='..med ...

phphtml

What is the best way to extract data from an HTML string stored as a JSON value using Python?

I have a JSON file that contains the following data: { "entryLabel": "cat", "entryContent": "<div class=\"entry_container\"><div class=\"entry lang_en-gb\" id=\"cat_1\"><span class=\"inline\"& ...

pythonhtmljson