Centering png image
<!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.
html css
asked Nov 20 '18 at 21:54
Bashar OdehBashar Odeh
1
add a comment |
<!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.
html css
asked Nov 20 '18 at 21:54
Bashar OdehBashar Odeh
1
You should delete<img align="right">- this isn't doing anything (one img tag per image). For quick positioning, in CSS you can setmargin-leftandmargin-righttoauto. For better CSS positioning, use flexbox - flexboxfroggy.com
– s89_
Nov 20 '18 at 22:12
2
Possible duplicate of How to horizontally center a <div>?
– Jere
Nov 20 '18 at 23:14
add a comment |
<!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.
html css
asked Nov 20 '18 at 21:54
Bashar OdehBashar Odeh
1
<!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.
html css
html css
asked Nov 20 '18 at 21:54
Bashar OdehBashar Odeh
1
asked Nov 20 '18 at 21:54
Bashar OdehBashar Odeh
1
asked Nov 20 '18 at 21:54
Bashar OdehBashar Odeh
1
asked Nov 20 '18 at 21:54
Bashar OdehBashar Odeh
1
asked Nov 20 '18 at 21:54
Bashar OdehBashar Odeh
1
1
You should delete<img align="right">- this isn't doing anything (one img tag per image). For quick positioning, in CSS you can setmargin-leftandmargin-righttoauto. For better CSS positioning, use flexbox - flexboxfroggy.com
– s89_
Nov 20 '18 at 22:12
2
Possible duplicate of How to horizontally center a <div>?
– Jere
Nov 20 '18 at 23:14
add a comment |
You should delete<img align="right">- this isn't doing anything (one img tag per image). For quick positioning, in CSS you can setmargin-leftandmargin-righttoauto. For better CSS positioning, use flexbox - flexboxfroggy.com
– s89_
Nov 20 '18 at 22:12
2
Possible duplicate of How to horizontally center a <div>?
– Jere
Nov 20 '18 at 23:14
You should delete
<img align="right"> - 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 - flexboxfroggy.com– s89_
Nov 20 '18 at 22:12
You should delete
<img align="right"> - 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 - flexboxfroggy.com– s89_
Nov 20 '18 at 22:12
2
2
Possible duplicate of How to horizontally center a <div>?
– Jere
Nov 20 '18 at 23:14
Possible duplicate of How to horizontally center a <div>?
– Jere
Nov 20 '18 at 23:14
add a comment |
3 Answers
3
active
oldest
votes
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>answered Nov 20 '18 at 21:58
Amit BhoyarAmit Bhoyar
610114
Amit Bhoyar thank you but is there a way to put it in the bottom center
– Bashar Odeh
Nov 20 '18 at 22:01
try above edited solution
– Amit Bhoyar
Nov 20 '18 at 22:47
add a comment |
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.
answered Nov 20 '18 at 23:11
JereJere
519219
add a comment |
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>answered Nov 20 '18 at 23:25
webfrogswebfrogs
1,16832447
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402178%2fcentering-png-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Nov 20 '18 at 21:58
Amit BhoyarAmit Bhoyar
610114
Amit Bhoyar thank you but is there a way to put it in the bottom center
– Bashar Odeh
Nov 20 '18 at 22:01
try above edited solution
– Amit Bhoyar
Nov 20 '18 at 22:47
add a comment |
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>answered Nov 20 '18 at 21:58
Amit BhoyarAmit Bhoyar
610114
Amit Bhoyar thank you but is there a way to put it in the bottom center
– Bashar Odeh
Nov 20 '18 at 22:01
try above edited solution
– Amit Bhoyar
Nov 20 '18 at 22:47
add a comment |
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>answered Nov 20 '18 at 21:58
Amit BhoyarAmit Bhoyar
610114
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>.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>.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>answered Nov 20 '18 at 21:58
Amit BhoyarAmit Bhoyar
610114
edited Nov 20 '18 at 22:25
answered Nov 20 '18 at 21:58
Amit BhoyarAmit Bhoyar
610114
answered Nov 20 '18 at 21:58
Amit BhoyarAmit Bhoyar
610114
answered Nov 20 '18 at 21:58
Amit BhoyarAmit Bhoyar
610114
610114
Amit Bhoyar thank you but is there a way to put it in the bottom center
– Bashar Odeh
Nov 20 '18 at 22:01
try above edited solution
– Amit Bhoyar
Nov 20 '18 at 22:47
add a comment |
Amit Bhoyar thank you but is there a way to put it in the bottom center
– Bashar Odeh
Nov 20 '18 at 22:01
try above edited solution
– Amit Bhoyar
Nov 20 '18 at 22:47
Amit Bhoyar thank you but is there a way to put it in the bottom center
– Bashar Odeh
Nov 20 '18 at 22:01
Amit Bhoyar thank you but is there a way to put it in the bottom center
– Bashar Odeh
Nov 20 '18 at 22:01
try above edited solution
– Amit Bhoyar
Nov 20 '18 at 22:47
try above edited solution
– Amit Bhoyar
Nov 20 '18 at 22:47
add a comment |
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.
answered Nov 20 '18 at 23:11
JereJere
519219
add a comment |
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.
answered Nov 20 '18 at 23:11
JereJere
519219
add a comment |
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.
answered Nov 20 '18 at 23:11
JereJere
519219
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.
answered Nov 20 '18 at 23:11
JereJere
519219
answered Nov 20 '18 at 23:11
JereJere
519219
answered Nov 20 '18 at 23:11
JereJere
519219
answered Nov 20 '18 at 23:11
JereJere
519219
519219
add a comment |
add a comment |
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>answered Nov 20 '18 at 23:25
webfrogswebfrogs
1,16832447
add a comment |
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>answered Nov 20 '18 at 23:25
webfrogswebfrogs
1,16832447
add a comment |
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>answered Nov 20 '18 at 23:25
webfrogswebfrogs
1,16832447
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>.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>.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>answered Nov 20 '18 at 23:25
webfrogswebfrogs
1,16832447
answered Nov 20 '18 at 23:25
webfrogswebfrogs
1,16832447
answered Nov 20 '18 at 23:25
webfrogswebfrogs
1,16832447
answered Nov 20 '18 at 23:25
webfrogswebfrogs
1,16832447
1,16832447
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402178%2fcentering-png-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You should delete
<img align="right">- this isn't doing anything (one img tag per image). For quick positioning, in CSS you can setmargin-leftandmargin-righttoauto. For better CSS positioning, use flexbox - flexboxfroggy.com– s89_
Nov 20 '18 at 22:12
2
Possible duplicate of How to horizontally center a <div>?
– Jere
Nov 20 '18 at 23:14