How to center multiple of the same Images horizontally in Javascript?
up vote
-1
down vote
favorite
With the code below I'm trying to make it print out the same image 19 times and then have those 19 images as a whole centered horizontally on the page, but I can't seem to get it to work.
var totImg = "large.png";
function prettyHeader()
function totoroImg()
var img = document.createElement("img");
img.style.width = "30px";
img.style.height = "30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
javascript html css
edited Nov 12 at 2:45
Gustavo Lopes
646217
asked Nov 12 at 0:52
SirSean120
11
|
show 1 more comment
up vote
-1
down vote
favorite
With the code below I'm trying to make it print out the same image 19 times and then have those 19 images as a whole centered horizontally on the page, but I can't seem to get it to work.
var totImg = "large.png";
function prettyHeader()
function totoroImg()
var img = document.createElement("img");
img.style.width = "30px";
img.style.height = "30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
javascript html css
edited Nov 12 at 2:45
Gustavo Lopes
646217
asked Nov 12 at 0:52
SirSean120
11
2
I wonder if either css grid or flexbox might be helpful to you? Here is a fav tutorial on flexbox. If you are unfamiliar, seriously take the time to do that flexbox tut. Super useful for layout, and super easy as explained in that vid.
– gibberish
Nov 12 at 0:56
@gibberish Thanks man, but I'm more looking for if there's a way to view those 19 images in the function as a whole in Javascript and center it.
– SirSean120
Nov 12 at 1:11
Think about how you would do this if the images where part of the document in the HTML to begin with, and not added dynamically via JavaScript. Then apply that same solution to your images that got added dynamically.
– misorude
Nov 12 at 8:22
@misorude That's the issue I can't seem to figure out how to add rules to that function to make all those images centered. Would you be able to explain what I should do.
– SirSean120
Nov 12 at 14:07
“Would you be able to explain what I should do.” - I just did that, didn’t I? Step number 1: Find a solution to display images centered in the way you want them to be, with a static HTML/CSS example, without involving any script at this point. Once you got that, you can start thinking about how to get your script to dynamically produce the same.
– misorude
Nov 12 at 14:12
|
show 1 more comment
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
With the code below I'm trying to make it print out the same image 19 times and then have those 19 images as a whole centered horizontally on the page, but I can't seem to get it to work.
var totImg = "large.png";
function prettyHeader()
function totoroImg()
var img = document.createElement("img");
img.style.width = "30px";
img.style.height = "30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
javascript html css
edited Nov 12 at 2:45
Gustavo Lopes
646217
asked Nov 12 at 0:52
SirSean120
11
With the code below I'm trying to make it print out the same image 19 times and then have those 19 images as a whole centered horizontally on the page, but I can't seem to get it to work.
var totImg = "large.png";
function prettyHeader()
function totoroImg()
var img = document.createElement("img");
img.style.width = "30px";
img.style.height = "30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
javascript html css
javascript html css
edited Nov 12 at 2:45
Gustavo Lopes
646217
asked Nov 12 at 0:52
SirSean120
11
edited Nov 12 at 2:45
Gustavo Lopes
646217
asked Nov 12 at 0:52
SirSean120
11
edited Nov 12 at 2:45
Gustavo Lopes
646217
edited Nov 12 at 2:45
Gustavo Lopes
646217
edited Nov 12 at 2:45
Gustavo Lopes
646217
646217
asked Nov 12 at 0:52
SirSean120
11
asked Nov 12 at 0:52
SirSean120
11
asked Nov 12 at 0:52
SirSean120
11
11
2
I wonder if either css grid or flexbox might be helpful to you? Here is a fav tutorial on flexbox. If you are unfamiliar, seriously take the time to do that flexbox tut. Super useful for layout, and super easy as explained in that vid.
– gibberish
Nov 12 at 0:56
@gibberish Thanks man, but I'm more looking for if there's a way to view those 19 images in the function as a whole in Javascript and center it.
– SirSean120
Nov 12 at 1:11
Think about how you would do this if the images where part of the document in the HTML to begin with, and not added dynamically via JavaScript. Then apply that same solution to your images that got added dynamically.
– misorude
Nov 12 at 8:22
@misorude That's the issue I can't seem to figure out how to add rules to that function to make all those images centered. Would you be able to explain what I should do.
– SirSean120
Nov 12 at 14:07
“Would you be able to explain what I should do.” - I just did that, didn’t I? Step number 1: Find a solution to display images centered in the way you want them to be, with a static HTML/CSS example, without involving any script at this point. Once you got that, you can start thinking about how to get your script to dynamically produce the same.
– misorude
Nov 12 at 14:12
|
show 1 more comment
2
I wonder if either css grid or flexbox might be helpful to you? Here is a fav tutorial on flexbox. If you are unfamiliar, seriously take the time to do that flexbox tut. Super useful for layout, and super easy as explained in that vid.
– gibberish
Nov 12 at 0:56
@gibberish Thanks man, but I'm more looking for if there's a way to view those 19 images in the function as a whole in Javascript and center it.
– SirSean120
Nov 12 at 1:11
Think about how you would do this if the images where part of the document in the HTML to begin with, and not added dynamically via JavaScript. Then apply that same solution to your images that got added dynamically.
– misorude
Nov 12 at 8:22
@misorude That's the issue I can't seem to figure out how to add rules to that function to make all those images centered. Would you be able to explain what I should do.
– SirSean120
Nov 12 at 14:07
“Would you be able to explain what I should do.” - I just did that, didn’t I? Step number 1: Find a solution to display images centered in the way you want them to be, with a static HTML/CSS example, without involving any script at this point. Once you got that, you can start thinking about how to get your script to dynamically produce the same.
– misorude
Nov 12 at 14:12
2
2
I wonder if either css grid or flexbox might be helpful to you? Here is a fav tutorial on flexbox. If you are unfamiliar, seriously take the time to do that flexbox tut. Super useful for layout, and super easy as explained in that vid.
– gibberish
Nov 12 at 0:56
I wonder if either css grid or flexbox might be helpful to you? Here is a fav tutorial on flexbox. If you are unfamiliar, seriously take the time to do that flexbox tut. Super useful for layout, and super easy as explained in that vid.
– gibberish
Nov 12 at 0:56
@gibberish Thanks man, but I'm more looking for if there's a way to view those 19 images in the function as a whole in Javascript and center it.
– SirSean120
Nov 12 at 1:11
@gibberish Thanks man, but I'm more looking for if there's a way to view those 19 images in the function as a whole in Javascript and center it.
– SirSean120
Nov 12 at 1:11
Think about how you would do this if the images where part of the document in the HTML to begin with, and not added dynamically via JavaScript. Then apply that same solution to your images that got added dynamically.
– misorude
Nov 12 at 8:22
Think about how you would do this if the images where part of the document in the HTML to begin with, and not added dynamically via JavaScript. Then apply that same solution to your images that got added dynamically.
– misorude
Nov 12 at 8:22
@misorude That's the issue I can't seem to figure out how to add rules to that function to make all those images centered. Would you be able to explain what I should do.
– SirSean120
Nov 12 at 14:07
@misorude That's the issue I can't seem to figure out how to add rules to that function to make all those images centered. Would you be able to explain what I should do.
– SirSean120
Nov 12 at 14:07
“Would you be able to explain what I should do.” - I just did that, didn’t I? Step number 1: Find a solution to display images centered in the way you want them to be, with a static HTML/CSS example, without involving any script at this point. Once you got that, you can start thinking about how to get your script to dynamically produce the same.
– misorude
Nov 12 at 14:12
“Would you be able to explain what I should do.” - I just did that, didn’t I? Step number 1: Find a solution to display images centered in the way you want them to be, with a static HTML/CSS example, without involving any script at this point. Once you got that, you can start thinking about how to get your script to dynamically produce the same.
– misorude
Nov 12 at 14:12
|
show 1 more comment
1 Answer
1
active
oldest
votes
up vote
0
down vote
var totImg = "https://placeimg.com/30/30/animals";
function prettyHeader()
function totoroImg()
var img =document.createElement("img");
img.style.width= "30px";
img.style.height="30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
document.body.style = "display: flex; justify-content: center; flex-direction: row";edited Nov 12 at 2:21
gibberish
20.4k105381
answered Nov 12 at 1:32
Ziyo
21729
Where should I add that to my code?
– SirSean120
Nov 12 at 1:42
Adding that new line just seems to add a giant white square in the middle of the page with the 19 images offset to the right
– SirSean120
Nov 12 at 3:35
Adding that line works 100%. You might be doing something wrong.
– Ziyo
Nov 13 at 13:51
Yeah thank you very much I mistakenly added it to the wrong line.
– SirSean120
Nov 13 at 19:39
Only having one more issue, is that whenever I try to add anything else such as another seperate image or text it trys to place it on the same line as those 19 images, how would I seperate them?
– SirSean120
Nov 13 at 20:57
|
show 2 more comments
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',
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
);
);
draft saved
draft discarded
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%2f53254755%2fhow-to-center-multiple-of-the-same-images-horizontally-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
var totImg = "https://placeimg.com/30/30/animals";
function prettyHeader()
function totoroImg()
var img =document.createElement("img");
img.style.width= "30px";
img.style.height="30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
document.body.style = "display: flex; justify-content: center; flex-direction: row";edited Nov 12 at 2:21
gibberish
20.4k105381
answered Nov 12 at 1:32
Ziyo
21729
Where should I add that to my code?
– SirSean120
Nov 12 at 1:42
Adding that new line just seems to add a giant white square in the middle of the page with the 19 images offset to the right
– SirSean120
Nov 12 at 3:35
Adding that line works 100%. You might be doing something wrong.
– Ziyo
Nov 13 at 13:51
Yeah thank you very much I mistakenly added it to the wrong line.
– SirSean120
Nov 13 at 19:39
Only having one more issue, is that whenever I try to add anything else such as another seperate image or text it trys to place it on the same line as those 19 images, how would I seperate them?
– SirSean120
Nov 13 at 20:57
|
show 2 more comments
up vote
0
down vote
var totImg = "https://placeimg.com/30/30/animals";
function prettyHeader()
function totoroImg()
var img =document.createElement("img");
img.style.width= "30px";
img.style.height="30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
document.body.style = "display: flex; justify-content: center; flex-direction: row";edited Nov 12 at 2:21
gibberish
20.4k105381
answered Nov 12 at 1:32
Ziyo
21729
Where should I add that to my code?
– SirSean120
Nov 12 at 1:42
Adding that new line just seems to add a giant white square in the middle of the page with the 19 images offset to the right
– SirSean120
Nov 12 at 3:35
Adding that line works 100%. You might be doing something wrong.
– Ziyo
Nov 13 at 13:51
Yeah thank you very much I mistakenly added it to the wrong line.
– SirSean120
Nov 13 at 19:39
Only having one more issue, is that whenever I try to add anything else such as another seperate image or text it trys to place it on the same line as those 19 images, how would I seperate them?
– SirSean120
Nov 13 at 20:57
|
show 2 more comments
up vote
0
down vote
up vote
0
down vote
var totImg = "https://placeimg.com/30/30/animals";
function prettyHeader()
function totoroImg()
var img =document.createElement("img");
img.style.width= "30px";
img.style.height="30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
document.body.style = "display: flex; justify-content: center; flex-direction: row";edited Nov 12 at 2:21
gibberish
20.4k105381
answered Nov 12 at 1:32
Ziyo
21729
var totImg = "https://placeimg.com/30/30/animals";
function prettyHeader()
function totoroImg()
var img =document.createElement("img");
img.style.width= "30px";
img.style.height="30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
document.body.style = "display: flex; justify-content: center; flex-direction: row";var totImg = "https://placeimg.com/30/30/animals";
function prettyHeader()
function totoroImg()
var img =document.createElement("img");
img.style.width= "30px";
img.style.height="30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
document.body.style = "display: flex; justify-content: center; flex-direction: row";var totImg = "https://placeimg.com/30/30/animals";
function prettyHeader()
function totoroImg()
var img =document.createElement("img");
img.style.width= "30px";
img.style.height="30px";
img.src=totImg;
return img;
for(var totPrint=0; totPrint<20; totPrint++)
document.body.appendChild(totoroImg());
prettyHeader();
document.body.style = "display: flex; justify-content: center; flex-direction: row";edited Nov 12 at 2:21
gibberish
20.4k105381
answered Nov 12 at 1:32
Ziyo
21729
edited Nov 12 at 2:21
gibberish
20.4k105381
edited Nov 12 at 2:21
gibberish
20.4k105381
edited Nov 12 at 2:21
gibberish
20.4k105381
20.4k105381
answered Nov 12 at 1:32
Ziyo
21729
answered Nov 12 at 1:32
Ziyo
21729
answered Nov 12 at 1:32
Ziyo
21729
21729
Where should I add that to my code?
– SirSean120
Nov 12 at 1:42
Adding that new line just seems to add a giant white square in the middle of the page with the 19 images offset to the right
– SirSean120
Nov 12 at 3:35
Adding that line works 100%. You might be doing something wrong.
– Ziyo
Nov 13 at 13:51
Yeah thank you very much I mistakenly added it to the wrong line.
– SirSean120
Nov 13 at 19:39
Only having one more issue, is that whenever I try to add anything else such as another seperate image or text it trys to place it on the same line as those 19 images, how would I seperate them?
– SirSean120
Nov 13 at 20:57
|
show 2 more comments
Where should I add that to my code?
– SirSean120
Nov 12 at 1:42
Adding that new line just seems to add a giant white square in the middle of the page with the 19 images offset to the right
– SirSean120
Nov 12 at 3:35
Adding that line works 100%. You might be doing something wrong.
– Ziyo
Nov 13 at 13:51
Yeah thank you very much I mistakenly added it to the wrong line.
– SirSean120
Nov 13 at 19:39
Only having one more issue, is that whenever I try to add anything else such as another seperate image or text it trys to place it on the same line as those 19 images, how would I seperate them?
– SirSean120
Nov 13 at 20:57
Where should I add that to my code?
– SirSean120
Nov 12 at 1:42
Where should I add that to my code?
– SirSean120
Nov 12 at 1:42
Adding that new line just seems to add a giant white square in the middle of the page with the 19 images offset to the right
– SirSean120
Nov 12 at 3:35
Adding that new line just seems to add a giant white square in the middle of the page with the 19 images offset to the right
– SirSean120
Nov 12 at 3:35
Adding that line works 100%. You might be doing something wrong.
– Ziyo
Nov 13 at 13:51
Adding that line works 100%. You might be doing something wrong.
– Ziyo
Nov 13 at 13:51
Yeah thank you very much I mistakenly added it to the wrong line.
– SirSean120
Nov 13 at 19:39
Yeah thank you very much I mistakenly added it to the wrong line.
– SirSean120
Nov 13 at 19:39
Only having one more issue, is that whenever I try to add anything else such as another seperate image or text it trys to place it on the same line as those 19 images, how would I seperate them?
– SirSean120
Nov 13 at 20:57
Only having one more issue, is that whenever I try to add anything else such as another seperate image or text it trys to place it on the same line as those 19 images, how would I seperate them?
– SirSean120
Nov 13 at 20:57
|
show 2 more comments
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53254755%2fhow-to-center-multiple-of-the-same-images-horizontally-in-javascript%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
2
I wonder if either css grid or flexbox might be helpful to you? Here is a fav tutorial on flexbox. If you are unfamiliar, seriously take the time to do that flexbox tut. Super useful for layout, and super easy as explained in that vid.
– gibberish
Nov 12 at 0:56
@gibberish Thanks man, but I'm more looking for if there's a way to view those 19 images in the function as a whole in Javascript and center it.
– SirSean120
Nov 12 at 1:11
Think about how you would do this if the images where part of the document in the HTML to begin with, and not added dynamically via JavaScript. Then apply that same solution to your images that got added dynamically.
– misorude
Nov 12 at 8:22
@misorude That's the issue I can't seem to figure out how to add rules to that function to make all those images centered. Would you be able to explain what I should do.
– SirSean120
Nov 12 at 14:07
“Would you be able to explain what I should do.” - I just did that, didn’t I? Step number 1: Find a solution to display images centered in the way you want them to be, with a static HTML/CSS example, without involving any script at this point. Once you got that, you can start thinking about how to get your script to dynamically produce the same.
– misorude
Nov 12 at 14:12