Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: HTML image positioning issue - centering with flexboxes  (Read 6612 times)

0 Members and 1 Guest are viewing this topic.

Zodiac1110

    Topic Starter


    Rookie

    • Experience: Experienced
    • OS: Windows 8
    HTML image positioning issue - centering with flexboxes
    « 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;
       
    }
    « Last Edit: November 07, 2016, 05:22:49 AM by Allan »

    Allan

    • Moderator

    • Mastermind
    • Thanked: 1260
    • Experience: Guru
    • OS: Windows 10
    Re: HTML image positioning issue - centering with flexboxes
    « Reply #1 on: November 07, 2016, 05:23:15 AM »
    I've removed the link to your site from this thread too. No advertising permitted.

    Zodiac1110

      Topic Starter


      Rookie

      • Experience: Experienced
      • OS: Windows 8
      Re: HTML image positioning issue - centering with flexboxes
      « Reply #2 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.

      BC_Programmer


        Mastermind
      • Typing is no substitute for thinking.
      • Thanked: 1140
        • Yes
        • Yes
        • BC-Programming.com
      • Certifications: List
      • Computer: Specs
      • Experience: Beginner
      • OS: Windows 11
      Re: HTML image positioning issue - centering with flexboxes
      « Reply #3 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.
      I was trying to dereference Null Pointers before it was cool.

      Zodiac1110

        Topic Starter


        Rookie

        • Experience: Experienced
        • OS: Windows 8
        Re: HTML image positioning issue - centering with flexboxes
        « Reply #4 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.

        BC_Programmer


          Mastermind
        • Typing is no substitute for thinking.
        • Thanked: 1140
          • Yes
          • Yes
          • BC-Programming.com
        • Certifications: List
        • Computer: Specs
        • Experience: Beginner
        • OS: Windows 11
        Re: HTML image positioning issue - centering with flexboxes
        « Reply #5 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.
        I was trying to dereference Null Pointers before it was cool.

        Allan

        • Moderator

        • Mastermind
        • Thanked: 1260
        • Experience: Guru
        • OS: Windows 10
        Re: HTML image positioning issue - centering with flexboxes
        « Reply #6 on: November 07, 2016, 10:59:41 AM »
        The moron has banned you. Thanks for stopping by.