Computer Hope

Internet & Networking => Web design => Topic started by: Zodiac1110 on November 06, 2016, 10:12:37 PM

Title: HTML image positioning issue - centering with flexboxes
Post by: Zodiac1110 on November 06, 2016, 10:12:37 PM
In HTML, I'm having kind of a simple problem with imagery. I need to know how to get an image to align to the center. I've been told to look up and try examples of flexboxes, but I have and have been unsuccessful in doing so. As you can tell the picture is far to the left and  I want it in the center. I'm having the toughest time getting this done and would really appreciate some help.

Here is my current code to try and get the picture to justify

for the main site div part ( near the end I added the unnecessary div tag but yeah it's not centering it on the web page at all and I don't understand why not. Do I have to specific a larger box in CSS and somehow get the box to go all the way across to the right, then center it inside the whole horizontal box?

Code: [Select]
<div class="displayed">
    <IMG class="displayed" src="images/image4.jpg" alt="Grandpa" align"center">
</div>



for the css part

.displayed
{
    justify-content: space-around;
   
}
Title: Re: HTML image positioning issue - centering with flexboxes
Post by: Allan on November 07, 2016, 05:23:15 AM
I've removed the link to your site from this thread too. No advertising permitted.
Title: Re: HTML image positioning issue - centering with flexboxes
Post by: Zodiac1110 on November 07, 2016, 08:36:24 AM
It wasn't advertising it was the link to my website so people can see what's wrong with the *censored* thing you ignorant fool. I don't give a *censored* if you are a mod. You just go on ahead and tell me who to complain to. Give me the instructions top to bottom buddy.
Title: Re: HTML image positioning issue - centering with flexboxes
Post by: BC_Programmer on November 07, 2016, 09:06:30 AM
A link isn't needed in this case as your description should be sufficient. Something like:
Code: [Select]
.displayed
{
    display: block;
    margin-left:auto;
    margin-right:auto;
}

Should work, I've just done a quick test and it centers an image within it's container. It shouldn't be necessary to have the same class on both the container and the image.
Title: Re: HTML image positioning issue - centering with flexboxes
Post by: Zodiac1110 on November 07, 2016, 10:14:13 AM
I've got it fixed, no thanks to that moron Allan who can't read. Now he's giving me a warning and also apologized at the same time. But he's not apologizing for the warning? *censored*? This guy is a straight up idiot. He doesn't need to be a moderator or whatever he is.
Title: Re: HTML image positioning issue - centering with flexboxes
Post by: BC_Programmer on November 07, 2016, 10:36:06 AM
In your defense if you were advertising you are doing a poor job of representing your people skills.
Title: Re: HTML image positioning issue - centering with flexboxes
Post by: Allan on November 07, 2016, 10:59:41 AM
The moron has banned you. Thanks for stopping by.