CODEWITHSUNDEEP
htmlcsscentering
Benafsha Arya
Benafsha Arya

Reputation: 17

How to position this image at the bottom center of the page?

When I zoom out to 67% on my browser the image will appear at the bottom of the page as I want to appear when the page is not zoomed out when its normal (screenshot).

But the image appear like this on my page as normal view.

This is my CSS

.fix {
   position: relative;
   left: 30%;
   bottom: 10%;
}

Upvotes: 1

Views: 134

Answers (2)

Cladiuss
Cladiuss

Reputation: 535

To center a element in the page, you should use this CSS :

.element {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

It also works with position: absolute and position: fixed properties.

The left: 50% property will center the left side of the .element to the horizontal center of the page.

The transform: translateX(-50%) property will translate the .element 50% of its width to the left (because of the negative value).

This way, the .element will always be horizontally centered no matter what its width is.

The next problem you show on the image, is that it overlap the text. To avoid it, you should place this element after the text.

Here is an example :

.fix {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
body {
  position: relative;
  padding-bottom: 100px; /* height of the image */
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png" alt="Stack Overflow" class="fix" />

Another example if you want the image to be fixed at the bottom :

.fix {
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
body {
  position: relative;
  padding-bottom: 100px; /* height of the image */
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png" alt="Stack Overflow" class="fix" />

Upvotes: 1

n1kkou
n1kkou

Reputation: 3142

Given the fact that the text is black and the image has also black content, try to keep it as a img element and not as a background image.

You can try to add a padding-bottom to the img's parent element equals to the height of the image.

Upvotes: 0

Related Questions