Aligning an image of variable size perfectly both in the center horizontally as well as vertically

Question

Aligning an image of variable size perfectly both in the center horizontally as well as vertically

After extensive research, I have come across numerous solutions to this issue, but none of them have proven effective in my specific scenario. Here is a JSFiddle link illustrating the problem at hand:

http://jsfiddle.net/kr394ye2/1/

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    float: left;
}
.classB {
    width: auto;
    height: auto;
    max-width: 50px;
    max-height: 50px;
}

<div class="classA">
    <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>

I am attempting to center an image both horizontally and vertically within its containing div, with the image automatically adjusting to fit the size of the div. It is important that the image remains an inline element and not a background.

Various methods such as using auto margins, display properties, text-align, vertical-align, and even the center tag have all been attempted without success.

An ideal solution would effectively center the image both horizontally and vertically within the div.

html css

Answer 1

Answer №1

To achieve this layout, you can utilize the inline block technique along with pseudo elements.

.boxA {
    background-color: cyan;
    width: 70px;
    height: 70px;
    float: left;
    text-align: center;
    font-size: 0;
}
.boxA:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.boxB {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
}

<div class="boxA">
    <img class="boxB" src="https://www.example.com/image.jpg">
</div>

Keep in mind that this solution is effective only when the image is the sole child element within the container and when the container's height is specified.

Also note that <img> is a self-closing tag, so use <img src=""> instead of incorrect syntax like <img></img>.

Answer 2

To achieve this layout, you can utilize the inline block technique along with pseudo elements.

.boxA {
    background-color: cyan;
    width: 70px;
    height: 70px;
    float: left;
    text-align: center;
    font-size: 0;
}
.boxA:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.boxB {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
}

<div class="boxA">
    <img class="boxB" src="https://www.example.com/image.jpg">
</div>

Keep in mind that this solution is effective only when the image is the sole child element within the container and when the container's height is specified.

Also note that <img> is a self-closing tag, so use <img src=""> instead of incorrect syntax like <img></img>.

Answer 3

Answer №2

Implement the following CSS code:

.classB {
    margin: auto;
    max-width: 50px;
    max-height: 50px;
}

Answer 4

Implement the following CSS code:

.classB {
    margin: auto;
    max-width: 50px;
    max-height: 50px;
}

Answer 5

Answer №3

For both vertical and horizontal centering, this is the solution you're looking for.

Click here for an example

Generally speaking, using

    margin:0 auto;

works wonders.

Alternatively, if you only need horizontal centering, just apply

margin-left:auto;
margin-right:auto;

to your main wrapper.

Answer 6

For both vertical and horizontal centering, this is the solution you're looking for.

Click here for an example

Generally speaking, using

    margin:0 auto;

works wonders.

Alternatively, if you only need horizontal centering, just apply

margin-left:auto;
margin-right:auto;

to your main wrapper.

Answer 7

Answer №4

Update your CSS as follows:

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    padding: 5px;
}

.classB {
    display: block; margin: auto;
    object-fit: cover;
    max-width: 100%;
    height: 100%;
}

The CSS property object-fit: cover is useful for maintaining image quality while fitting it to a container.

Check out the JSFiddle demo here

Learn more about object-fit at object-fit - MDN Docs

Answer 8

Update your CSS as follows:

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    padding: 5px;
}

.classB {
    display: block; margin: auto;
    object-fit: cover;
    max-width: 100%;
    height: 100%;
}

The CSS property object-fit: cover is useful for maintaining image quality while fitting it to a container.

Check out the JSFiddle demo here

Learn more about object-fit at object-fit - MDN Docs

Answer 9

Answer №5

Have you experimented with using display: table-cell on the parent div instead of block or inline-block? This might help achieve the alignment you're seeking.

Answer 10

Have you experimented with using display: table-cell on the parent div instead of block or inline-block? This might help achieve the alignment you're seeking.

Answer 11

Answer №6

Here are the four essential lines of code you'll need for perfect alignment:

text-align: center; applied to the parent element handles horizontal positioning
position: relative;, top: 50%;, and transform: translateY(-50%); work together to center images vertically

I've included two blocks with different sizes but identical properties to demonstrate its versatility. Tested and confirmed compatibility with latest versions of Chrome, Safari, IE10, and Opera.

.classA {
    background-color: yellow;
    width: 300px;
    height: 50px;
    float: left;

    text-align: center;
}

.classB {
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 50px;

    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.classA2 {
    background-color: yellow;
    width: 100px;
    height: 70px;
    float: left;

    text-align: center;
}

.classB2 {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 70px;

    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.separator {
    display: block;
    clear:both;
    padding:20px;
}

<div class="classA">
    <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
<div class="separator"></div>
<div class="classA2">
    <img class="classB2" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>

Hopefully, this solution proves helpful to you :)

Answer 12

Here are the four essential lines of code you'll need for perfect alignment:

text-align: center; applied to the parent element handles horizontal positioning
position: relative;, top: 50%;, and transform: translateY(-50%); work together to center images vertically

I've included two blocks with different sizes but identical properties to demonstrate its versatility. Tested and confirmed compatibility with latest versions of Chrome, Safari, IE10, and Opera.

.classA {
    background-color: yellow;
    width: 300px;
    height: 50px;
    float: left;

    text-align: center;
}

.classB {
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 50px;

    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.classA2 {
    background-color: yellow;
    width: 100px;
    height: 70px;
    float: left;

    text-align: center;
}

.classB2 {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 70px;

    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.separator {
    display: block;
    clear:both;
    padding:20px;
}

<div class="classA">
    <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
<div class="separator"></div>
<div class="classA2">
    <img class="classB2" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>

Hopefully, this solution proves helpful to you :)

Aligning an image of variable size perfectly both in the center horizontally as well as vertically

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Utilize a dynamically generated href to execute a C# function

HTML text field within the same line

Tips for choosing a dropdown option that will appear first in Bootstrap

"Enhanced visuals with parallax scrolling feature implemented on various sections for an engaging

I must break free! Angular's $sce is failing to manage links to audio files (Strict Contextual Escaping)

Tips for meeting a JavaScript door unlocking condition with an HTML button

Issues with Adsense on a PHP website

The CSS Grid extends vertically beyond its bounds, rather than activating the overflow-y property

The formatting for C++ lnk2019 and lnk2020 is correct

Setting up an image background in three.js: A beginner's guide

Having an issue with button onClick functionality not working in Javascript

website: What is the best way to embed an input field within an image?

Formatting text over an image

Tips on removing a stylesheet while transitioning to another page in Vue

Designing dynamic SVG elements that maintain uniform stroke widths and rounded edges

Is it possible to open a new tab by clicking on an anchor tag

Deselecting options using jQuery

What is the best way to align div elements in HTML5?

Assistance with Parallax Mouse Movement, Using JQuery, HTML, and CSS

Failure to Include jQuery in Header.php File