Creating a responsive design for a centered image with absolute positioning

Question

Creating a responsive design for a centered image with absolute positioning

I'm trying to align an image at the bottom of a div while also centering it using the following CSS:

HTML:

<div class="myDiv">
  <img src="http://bit.ly/1gHcL8T" class="imageCenter" />
</div>

CSS:

.myDiv {
  width: 80%;
  height: 200px;
  position: relative; 
}

.imageCenter {
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    bottom: 0;
}

Now, I would like to make this image responsive by setting its width as a percentage. Is there a way to achieve this?

See JSFiddle here: http://jsfiddle.net/8e7UM/1/

css

Answer 1

Answer №1

If you're looking to enhance your website for modern browsers, you can achieve it by using this technique.

.helloImage {
    left: 50%;
    bottom: 0;
    width: 80%;
    position: absolute;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

For a simpler version, you can try this method without the intricate transforms.

.helloImage {
    left: 10%;
    right: 20%;
    bottom: 0;
    position: absolute;
}

Answer 2

If you're looking to enhance your website for modern browsers, you can achieve it by using this technique.

.helloImage {
    left: 50%;
    bottom: 0;
    width: 80%;
    position: absolute;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

For a simpler version, you can try this method without the intricate transforms.

.helloImage {
    left: 10%;
    right: 20%;
    bottom: 0;
    position: absolute;
}

Creating a responsive design for a centered image with absolute positioning

Answer №1

Similar questions

I require varying numbers of columns on each row based on the breakpoint in Bootstrap4

Showing tags with varying sizes

What is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

What is the best way to incorporate a style attribute into my EJS page content?

Creating a CSS Box Along the Border of Another Box: A Step-by-Step Guide

Creating a dynamic and unique border design in MUI

Utilizing CSS flex-end to position images

Enhance user experience with AngularJS Bootstrap autocomplete feature by automatically filling input box when hovering over dropdown options

I am looking for a way to add some color to the text within a div on my HTML page. Can you help me

Is there a way to have two SVG files displayed on a single HTML page at the same time

Change the CSS element if the current URL is not example.com/page1 or example.com/page2

Tips for defining conditions within the style attribute in JSP

Why is the toggle functioning properly?

jQuery show/hide functionality allows you to toggle the visibility of elements

Is there a way to incorporate page animations when utilizing the <a href> tag in HTML?

Customizing the style of react-select is essential for creating a unique and visually appealing user experience

After a CSS animation, the Div element disappears from view

Personalizing the fileTemplate selection in FineUploader

Is there an easy method for customizing scrollbars?

How can I incorporate Bootstrap/Semantic UI into an Express project without relying on external CDNs