How do I position the img element to a specific location?

Question

I want to position the img element in the middle of the site. I already tried to postion it in css with the bottom tag to no avail

CSS:

img {
    border-radius: 50%;
    display: block;
    width: 128px;
    margin-left: auto;
    margin-right: auto;
}

HTML:

<html>
    <div class="logo">
    <img src="assets/img/logo-icon.png" alt="Avatar"></div>

Does this answer your question? [CSS : center form in page horizontally and vertically](https://stackoverflow.com/questions/22658141/css-center-form-in-page-horizontally-and-vertically) — Thomas, Feb 07 '23 at 09:05

score 1 · Accepted Answer · edited Feb 08 '23 at 18:40

1

A simple option is to place an object in the center, you need to set its absolute position and the width of the parent block in % and then use left and right to center it.

.logo {
  width: 10%;
  height: 125px;
  border-radius: 40%;
  position: absolute;
  left: 45%; 
  right: 45%; 
  top: 40%;
}

<html>
  <body>
    <div class="logo">
      <img src="https://new-world-rpg.ru/wp-content/uploads/c/d/b/cdb30fb67d36f487047a812eef6c458d.jpeg" alt="Avatar">
    </div>
  </body>
</html>

edited Feb 08 '23 at 18:40

beaver

523
1
9
20

answered Feb 04 '23 at 19:19

GLobeasd

70
6

and you can also assign display: flex to the parent block and specify align-items: center;(centering on the Y coordinate) justify-content: center; (centering on the X coordinate) – GLobeasd Mar 14 '23 at 23:47

How do I position the img element to a specific location?

1 Answers1