Centering png image

Question

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Name of your Animal</title>
    <link rel = "stylesheet"
   type = "text/css"
   href = "style1.css" />

   </head>
   <body>

    <img src="jags2.png" alt="jaguar">
    <img align="right">


    <p> Add some info on your animal </p>
  </body>
</html>

I'm Trying to make a website about jaguars and I inserted an pic of one but it keeps going to the top left. I'm trying to center align it but it wont work, Please Help.

You should delete `` - this isn't doing anything (one img tag per image). For quick positioning, in CSS you can set `margin-left` and `margin-right` to `auto`. For better CSS positioning, use flexbox - https://flexboxfroggy.com/ — s89_, Nov 20 '18 at 22:12
Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — Jere, Nov 20 '18 at 23:14

Amit Bhoyar · Answer 1 · 2018-11-20T22:25:26.713

2

Try following ref: https://www.w3schools.com/css/css_align.asp

.center img {
    margin: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
}

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Name of your Animal</title>
    <link rel = "stylesheet"
   type = "text/css"
   href = "style1.css" />

   </head>
   <body>
    <div class="center">
        <img  src="https://tpc.googlesyndication.com/simgad/11423376298074074248" alt="jaguar">
    </div>

  </body>
</html>

edited Nov 20 '18 at 22:25

answered Nov 20 '18 at 21:58

Amit Bhoyar

1,007
5
20

Amit Bhoyar thank you but is there a way to put it in the bottom center – Bashar Odeh Nov 20 '18 at 22:01

score 0 · Answer 2 · answered Nov 20 '18 at 23:11

In HTML, an Object is defined within the < and >.

So <img src="jags2.png" alt="jaguar"> has only two attributes: src="jags2.png" and alt="jaguar". In the line below, you simply create a new img Tag which has only the one attribute: align="right". You don't see the second Image, because it doesn't even have a src attribute, so it doesn't load any picture. To give all three attributes to you jags2.png, you would have to write it all into the same Tag:

<img src="jags2.png" alt="jaguar" align="right">

That would put your Image to the right.

But you said you want it to be in the center. That is actually not that easy, because align="center" wouldn't work. In order to achieve that, you will have to use the style parameter like this:

<img src="jags2.png" alt="jaguar" style="left: 50%; position: absolute;">

...or you start using a separate CSS-File, which is in most cases the best choice.

score 0 · Answer 3 · answered Nov 20 '18 at 23:25

Here it is with the caption you had in your original code snippet.

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<p class="center">
  <img src="https://www.lazoo.org/wp-new/wp-content/uploads/2014/02/jaguar_tm.jpg" alt="jaguar"><br>
  Add some info on your animal
</p>

Centering png image

3 Answers3