Centering an element without taking bullet point into accountNeed an unordered list without any bulletsHow to center absolutely positioned element in div?Center a position:fixed elementHTML href with css ie ProblemVertical alignment of elements overlapping in IECSS - Excess space on the rightHow to center a “position: absolute” elementGridView Lines Not Showing up in IECreating a two-column-100% layout with BootstrapInvalid css style during zooming in calendar

Was Spock the First Vulcan in Starfleet?

How does residential electricity work?

Applicability of Single Responsibility Principle

Why Were Madagascar and New Zealand Discovered So Late?

What is the intuitive meaning of having a linear relationship between the logs of two variables?

How do I keep an essay about "feeling flat" from feeling flat?

What are the ramifications of creating a homebrew world without an Astral Plane?

Modify casing of marked letters

Ways to speed up user implemented RK4

How do I rename a LINUX host without needing to reboot for the rename to take effect?

Confused about a passage in Harry Potter y la piedra filosofal

What is the oldest known work of fiction?

I'm in charge of equipment buying but no one's ever happy with what I choose. How to fix this?

Where in the Bible does the greeting ("Dominus Vobiscum") used at Mass come from?

Everything Bob says is false. How does he get people to trust him?

Is expanding the research of a group into machine learning as a PhD student risky?

Is this Spell Mimic feat balanced?

What's the purpose of "true" in bash "if sudo true; then"

How to be diplomatic in refusing to write code that breaches the privacy of our users

Why are on-board computers allowed to change controls without notifying the pilots?

Do there exist finite commutative rings with identity that are not Bézout rings?

Is there a problem with hiding "forgot password" until it's needed?

If you attempt to grapple an opponent that you are hidden from, do they roll at disadvantage?

Can criminal fraud exist without damages?



Centering an


  • element without taking bullet point into account

    Need an unordered list without any bulletsHow to center absolutely positioned element in div?Center a position:fixed elementHTML href with css ie ProblemVertical alignment of elements overlapping in IECSS - Excess space on the rightHow to center a “position: absolute” elementGridView Lines Not Showing up in IECreating a two-column-100% layout with BootstrapInvalid css style during zooming in calendar













    7















    I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.






    #square 
    position: fixed;
    width: 350px;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(230, 255, 230);


    ul
    position: relative;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;


    li
    margin-top: 40px;
    padding-left: 75px;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 5px 20px 5px 20px;
    background-color: green;
    border-radius: 10px;
    width: 100px;
    text-align: center;


    .navlink
    text-decoration: none;
    color: white;

    <div id="square">
    <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
    </ul>
    </div>





    I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.










    share|improve this question



















    • 2





      most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set margin:0; and padding:0; to your ul and li styles, you should be able to then align or space it however you prefer.

      – ryantdecker
      3 hours ago






    • 1





      'which I do not want' - bullet points or the space taken, or both?

      – Vega
      2 hours ago















    7















    I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.






    #square 
    position: fixed;
    width: 350px;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(230, 255, 230);


    ul
    position: relative;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;


    li
    margin-top: 40px;
    padding-left: 75px;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 5px 20px 5px 20px;
    background-color: green;
    border-radius: 10px;
    width: 100px;
    text-align: center;


    .navlink
    text-decoration: none;
    color: white;

    <div id="square">
    <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
    </ul>
    </div>





    I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.










    share|improve this question



















    • 2





      most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set margin:0; and padding:0; to your ul and li styles, you should be able to then align or space it however you prefer.

      – ryantdecker
      3 hours ago






    • 1





      'which I do not want' - bullet points or the space taken, or both?

      – Vega
      2 hours ago













    7












    7








    7








    I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.






    #square 
    position: fixed;
    width: 350px;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(230, 255, 230);


    ul
    position: relative;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;


    li
    margin-top: 40px;
    padding-left: 75px;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 5px 20px 5px 20px;
    background-color: green;
    border-radius: 10px;
    width: 100px;
    text-align: center;


    .navlink
    text-decoration: none;
    color: white;

    <div id="square">
    <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
    </ul>
    </div>





    I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.










    share|improve this question
















    I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.






    #square 
    position: fixed;
    width: 350px;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(230, 255, 230);


    ul
    position: relative;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;


    li
    margin-top: 40px;
    padding-left: 75px;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 5px 20px 5px 20px;
    background-color: green;
    border-radius: 10px;
    width: 100px;
    text-align: center;


    .navlink
    text-decoration: none;
    color: white;

    <div id="square">
    <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
    </ul>
    </div>





    I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.






    #square 
    position: fixed;
    width: 350px;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(230, 255, 230);


    ul
    position: relative;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;


    li
    margin-top: 40px;
    padding-left: 75px;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 5px 20px 5px 20px;
    background-color: green;
    border-radius: 10px;
    width: 100px;
    text-align: center;


    .navlink
    text-decoration: none;
    color: white;

    <div id="square">
    <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
    </ul>
    </div>





    #square 
    position: fixed;
    width: 350px;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(230, 255, 230);


    ul
    position: relative;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;


    li
    margin-top: 40px;
    padding-left: 75px;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 5px 20px 5px 20px;
    background-color: green;
    border-radius: 10px;
    width: 100px;
    text-align: center;


    .navlink
    text-decoration: none;
    color: white;

    <div id="square">
    <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
    </ul>
    </div>






    html css css3 flexbox centering






    share|improve this question















    share|improve this question













    share|improve this question




    share|improve this question








    edited 46 mins ago









    kukkuz

    29.1k62869




    29.1k62869










    asked 3 hours ago









    SteelSteel

    705




    705







    • 2





      most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set margin:0; and padding:0; to your ul and li styles, you should be able to then align or space it however you prefer.

      – ryantdecker
      3 hours ago






    • 1





      'which I do not want' - bullet points or the space taken, or both?

      – Vega
      2 hours ago












    • 2





      most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set margin:0; and padding:0; to your ul and li styles, you should be able to then align or space it however you prefer.

      – ryantdecker
      3 hours ago






    • 1





      'which I do not want' - bullet points or the space taken, or both?

      – Vega
      2 hours ago







    2




    2





    most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set margin:0; and padding:0; to your ul and li styles, you should be able to then align or space it however you prefer.

    – ryantdecker
    3 hours ago





    most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set margin:0; and padding:0; to your ul and li styles, you should be able to then align or space it however you prefer.

    – ryantdecker
    3 hours ago




    1




    1





    'which I do not want' - bullet points or the space taken, or both?

    – Vega
    2 hours ago





    'which I do not want' - bullet points or the space taken, or both?

    – Vega
    2 hours ago












    3 Answers
    3






    active

    oldest

    votes


















    5














    It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:





    Ideally you should just reset the padding instead of negative margins - see demo below:






    #square 
    position: fixed;
    width: 350px;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(230, 255, 230);


    ul
    position: relative;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style-type: none; /* hide bullet points */
    padding-left: 0; /* ADDED */


    li
    margin-top: 40px;
    padding-left: 75px;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 5px 20px 5px 20px;
    background-color: green;
    border-radius: 10px;
    width: 100px;
    text-align: center;


    .navlink
    text-decoration: none;
    color: white;

    <div id="square">
    <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
    </ul>
    </div>








    share|improve this answer
































      0














      Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:






      #square 
      position: fixed;
      width: 350px;
      height: 100%;
      top: 0px;
      left: 0px;
      background-color: rgb(230, 255, 230);


      ul
      position: relative;
      bottom: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      list-style-type: none;


      li
      margin-top: 40px;
      margin-left: -40px;
      border-color: white;
      border-width: 2px;
      border-style: solid;
      padding: 5px 20px 5px 20px;
      background-color: green;
      border-radius: 10px;
      width: 100px;
      text-align: center;
      list-style-type: none;


      .navlink
      text-decoration: none;
      color: white;

      <div id="square">
      <ul>
      <li><a class="navlink" href="#">Introduction</a></li>
      <li><a class="navlink" href="#">Middle</a></li>
      <li><a class="navlink" href="#">End</a></li>
      </ul>
      </div>





      list-style-type: none on the <ul> is optional.






      share|improve this answer


















      • 2





        This works, thank you. But how did you know margin added by the bullet points was 40px?

        – Steel
        3 hours ago












      • You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.

        – ryantdecker
        3 hours ago


















      0














      Your given code almost ok just use one single line into style sheet
      in li style use below line



       list-style-type: none;


      New li style look like



      li 
      margin-top: 40px;
      padding-left: 75px;
      list-style-type: none;
      border-color: white;
      border-width: 2px;
      border-style: solid;
      padding: 5px 20px 5px 20px;
      background-color: green;
      border-radius: 10px;
      width: 100px;
      text-align: center;






      share|improve this answer






















        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
        );



        );













        draft saved

        draft discarded


















        StackExchange.ready(
        function ()
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369205%2fcentering-an-li-element-without-taking-bullet-point-into-account%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









        5














        It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:





        Ideally you should just reset the padding instead of negative margins - see demo below:






        #square 
        position: fixed;
        width: 350px;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: rgb(230, 255, 230);


        ul
        position: relative;
        bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        list-style-type: none; /* hide bullet points */
        padding-left: 0; /* ADDED */


        li
        margin-top: 40px;
        padding-left: 75px;
        border-color: white;
        border-width: 2px;
        border-style: solid;
        padding: 5px 20px 5px 20px;
        background-color: green;
        border-radius: 10px;
        width: 100px;
        text-align: center;


        .navlink
        text-decoration: none;
        color: white;

        <div id="square">
        <ul>
        <li><a class="navlink" href="#">Introduction</a></li>
        <li><a class="navlink" href="#">Middle</a></li>
        <li><a class="navlink" href="#">End</a></li>
        </ul>
        </div>








        share|improve this answer





























          5














          It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:





          Ideally you should just reset the padding instead of negative margins - see demo below:






          #square 
          position: fixed;
          width: 350px;
          height: 100%;
          top: 0px;
          left: 0px;
          background-color: rgb(230, 255, 230);


          ul
          position: relative;
          bottom: 30px;
          display: flex;
          flex-direction: column;
          align-items: center;
          list-style-type: none; /* hide bullet points */
          padding-left: 0; /* ADDED */


          li
          margin-top: 40px;
          padding-left: 75px;
          border-color: white;
          border-width: 2px;
          border-style: solid;
          padding: 5px 20px 5px 20px;
          background-color: green;
          border-radius: 10px;
          width: 100px;
          text-align: center;


          .navlink
          text-decoration: none;
          color: white;

          <div id="square">
          <ul>
          <li><a class="navlink" href="#">Introduction</a></li>
          <li><a class="navlink" href="#">Middle</a></li>
          <li><a class="navlink" href="#">End</a></li>
          </ul>
          </div>








          share|improve this answer



























            5












            5








            5







            It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:





            Ideally you should just reset the padding instead of negative margins - see demo below:






            #square 
            position: fixed;
            width: 350px;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: rgb(230, 255, 230);


            ul
            position: relative;
            bottom: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            list-style-type: none; /* hide bullet points */
            padding-left: 0; /* ADDED */


            li
            margin-top: 40px;
            padding-left: 75px;
            border-color: white;
            border-width: 2px;
            border-style: solid;
            padding: 5px 20px 5px 20px;
            background-color: green;
            border-radius: 10px;
            width: 100px;
            text-align: center;


            .navlink
            text-decoration: none;
            color: white;

            <div id="square">
            <ul>
            <li><a class="navlink" href="#">Introduction</a></li>
            <li><a class="navlink" href="#">Middle</a></li>
            <li><a class="navlink" href="#">End</a></li>
            </ul>
            </div>








            share|improve this answer















            It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:





            Ideally you should just reset the padding instead of negative margins - see demo below:






            #square 
            position: fixed;
            width: 350px;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: rgb(230, 255, 230);


            ul
            position: relative;
            bottom: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            list-style-type: none; /* hide bullet points */
            padding-left: 0; /* ADDED */


            li
            margin-top: 40px;
            padding-left: 75px;
            border-color: white;
            border-width: 2px;
            border-style: solid;
            padding: 5px 20px 5px 20px;
            background-color: green;
            border-radius: 10px;
            width: 100px;
            text-align: center;


            .navlink
            text-decoration: none;
            color: white;

            <div id="square">
            <ul>
            <li><a class="navlink" href="#">Introduction</a></li>
            <li><a class="navlink" href="#">Middle</a></li>
            <li><a class="navlink" href="#">End</a></li>
            </ul>
            </div>








            #square 
            position: fixed;
            width: 350px;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: rgb(230, 255, 230);


            ul
            position: relative;
            bottom: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            list-style-type: none; /* hide bullet points */
            padding-left: 0; /* ADDED */


            li
            margin-top: 40px;
            padding-left: 75px;
            border-color: white;
            border-width: 2px;
            border-style: solid;
            padding: 5px 20px 5px 20px;
            background-color: green;
            border-radius: 10px;
            width: 100px;
            text-align: center;


            .navlink
            text-decoration: none;
            color: white;

            <div id="square">
            <ul>
            <li><a class="navlink" href="#">Introduction</a></li>
            <li><a class="navlink" href="#">Middle</a></li>
            <li><a class="navlink" href="#">End</a></li>
            </ul>
            </div>





            #square 
            position: fixed;
            width: 350px;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: rgb(230, 255, 230);


            ul
            position: relative;
            bottom: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            list-style-type: none; /* hide bullet points */
            padding-left: 0; /* ADDED */


            li
            margin-top: 40px;
            padding-left: 75px;
            border-color: white;
            border-width: 2px;
            border-style: solid;
            padding: 5px 20px 5px 20px;
            background-color: green;
            border-radius: 10px;
            width: 100px;
            text-align: center;


            .navlink
            text-decoration: none;
            color: white;

            <div id="square">
            <ul>
            <li><a class="navlink" href="#">Introduction</a></li>
            <li><a class="navlink" href="#">Middle</a></li>
            <li><a class="navlink" href="#">End</a></li>
            </ul>
            </div>






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited 3 hours ago

























            answered 3 hours ago









            kukkuzkukkuz

            29.1k62869




            29.1k62869























                0














                Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:






                #square 
                position: fixed;
                width: 350px;
                height: 100%;
                top: 0px;
                left: 0px;
                background-color: rgb(230, 255, 230);


                ul
                position: relative;
                bottom: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                list-style-type: none;


                li
                margin-top: 40px;
                margin-left: -40px;
                border-color: white;
                border-width: 2px;
                border-style: solid;
                padding: 5px 20px 5px 20px;
                background-color: green;
                border-radius: 10px;
                width: 100px;
                text-align: center;
                list-style-type: none;


                .navlink
                text-decoration: none;
                color: white;

                <div id="square">
                <ul>
                <li><a class="navlink" href="#">Introduction</a></li>
                <li><a class="navlink" href="#">Middle</a></li>
                <li><a class="navlink" href="#">End</a></li>
                </ul>
                </div>





                list-style-type: none on the <ul> is optional.






                share|improve this answer


















                • 2





                  This works, thank you. But how did you know margin added by the bullet points was 40px?

                  – Steel
                  3 hours ago












                • You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.

                  – ryantdecker
                  3 hours ago















                0














                Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:






                #square 
                position: fixed;
                width: 350px;
                height: 100%;
                top: 0px;
                left: 0px;
                background-color: rgb(230, 255, 230);


                ul
                position: relative;
                bottom: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                list-style-type: none;


                li
                margin-top: 40px;
                margin-left: -40px;
                border-color: white;
                border-width: 2px;
                border-style: solid;
                padding: 5px 20px 5px 20px;
                background-color: green;
                border-radius: 10px;
                width: 100px;
                text-align: center;
                list-style-type: none;


                .navlink
                text-decoration: none;
                color: white;

                <div id="square">
                <ul>
                <li><a class="navlink" href="#">Introduction</a></li>
                <li><a class="navlink" href="#">Middle</a></li>
                <li><a class="navlink" href="#">End</a></li>
                </ul>
                </div>





                list-style-type: none on the <ul> is optional.






                share|improve this answer


















                • 2





                  This works, thank you. But how did you know margin added by the bullet points was 40px?

                  – Steel
                  3 hours ago












                • You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.

                  – ryantdecker
                  3 hours ago













                0












                0








                0







                Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:






                #square 
                position: fixed;
                width: 350px;
                height: 100%;
                top: 0px;
                left: 0px;
                background-color: rgb(230, 255, 230);


                ul
                position: relative;
                bottom: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                list-style-type: none;


                li
                margin-top: 40px;
                margin-left: -40px;
                border-color: white;
                border-width: 2px;
                border-style: solid;
                padding: 5px 20px 5px 20px;
                background-color: green;
                border-radius: 10px;
                width: 100px;
                text-align: center;
                list-style-type: none;


                .navlink
                text-decoration: none;
                color: white;

                <div id="square">
                <ul>
                <li><a class="navlink" href="#">Introduction</a></li>
                <li><a class="navlink" href="#">Middle</a></li>
                <li><a class="navlink" href="#">End</a></li>
                </ul>
                </div>





                list-style-type: none on the <ul> is optional.






                share|improve this answer













                Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:






                #square 
                position: fixed;
                width: 350px;
                height: 100%;
                top: 0px;
                left: 0px;
                background-color: rgb(230, 255, 230);


                ul
                position: relative;
                bottom: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                list-style-type: none;


                li
                margin-top: 40px;
                margin-left: -40px;
                border-color: white;
                border-width: 2px;
                border-style: solid;
                padding: 5px 20px 5px 20px;
                background-color: green;
                border-radius: 10px;
                width: 100px;
                text-align: center;
                list-style-type: none;


                .navlink
                text-decoration: none;
                color: white;

                <div id="square">
                <ul>
                <li><a class="navlink" href="#">Introduction</a></li>
                <li><a class="navlink" href="#">Middle</a></li>
                <li><a class="navlink" href="#">End</a></li>
                </ul>
                </div>





                list-style-type: none on the <ul> is optional.






                #square 
                position: fixed;
                width: 350px;
                height: 100%;
                top: 0px;
                left: 0px;
                background-color: rgb(230, 255, 230);


                ul
                position: relative;
                bottom: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                list-style-type: none;


                li
                margin-top: 40px;
                margin-left: -40px;
                border-color: white;
                border-width: 2px;
                border-style: solid;
                padding: 5px 20px 5px 20px;
                background-color: green;
                border-radius: 10px;
                width: 100px;
                text-align: center;
                list-style-type: none;


                .navlink
                text-decoration: none;
                color: white;

                <div id="square">
                <ul>
                <li><a class="navlink" href="#">Introduction</a></li>
                <li><a class="navlink" href="#">Middle</a></li>
                <li><a class="navlink" href="#">End</a></li>
                </ul>
                </div>





                #square 
                position: fixed;
                width: 350px;
                height: 100%;
                top: 0px;
                left: 0px;
                background-color: rgb(230, 255, 230);


                ul
                position: relative;
                bottom: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                list-style-type: none;


                li
                margin-top: 40px;
                margin-left: -40px;
                border-color: white;
                border-width: 2px;
                border-style: solid;
                padding: 5px 20px 5px 20px;
                background-color: green;
                border-radius: 10px;
                width: 100px;
                text-align: center;
                list-style-type: none;


                .navlink
                text-decoration: none;
                color: white;

                <div id="square">
                <ul>
                <li><a class="navlink" href="#">Introduction</a></li>
                <li><a class="navlink" href="#">Middle</a></li>
                <li><a class="navlink" href="#">End</a></li>
                </ul>
                </div>






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered 3 hours ago









                Obsidian AgeObsidian Age

                28.4k72345




                28.4k72345







                • 2





                  This works, thank you. But how did you know margin added by the bullet points was 40px?

                  – Steel
                  3 hours ago












                • You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.

                  – ryantdecker
                  3 hours ago












                • 2





                  This works, thank you. But how did you know margin added by the bullet points was 40px?

                  – Steel
                  3 hours ago












                • You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.

                  – ryantdecker
                  3 hours ago







                2




                2





                This works, thank you. But how did you know margin added by the bullet points was 40px?

                – Steel
                3 hours ago






                This works, thank you. But how did you know margin added by the bullet points was 40px?

                – Steel
                3 hours ago














                You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.

                – ryantdecker
                3 hours ago





                You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.

                – ryantdecker
                3 hours ago











                0














                Your given code almost ok just use one single line into style sheet
                in li style use below line



                 list-style-type: none;


                New li style look like



                li 
                margin-top: 40px;
                padding-left: 75px;
                list-style-type: none;
                border-color: white;
                border-width: 2px;
                border-style: solid;
                padding: 5px 20px 5px 20px;
                background-color: green;
                border-radius: 10px;
                width: 100px;
                text-align: center;






                share|improve this answer



























                  0














                  Your given code almost ok just use one single line into style sheet
                  in li style use below line



                   list-style-type: none;


                  New li style look like



                  li 
                  margin-top: 40px;
                  padding-left: 75px;
                  list-style-type: none;
                  border-color: white;
                  border-width: 2px;
                  border-style: solid;
                  padding: 5px 20px 5px 20px;
                  background-color: green;
                  border-radius: 10px;
                  width: 100px;
                  text-align: center;






                  share|improve this answer

























                    0












                    0








                    0







                    Your given code almost ok just use one single line into style sheet
                    in li style use below line



                     list-style-type: none;


                    New li style look like



                    li 
                    margin-top: 40px;
                    padding-left: 75px;
                    list-style-type: none;
                    border-color: white;
                    border-width: 2px;
                    border-style: solid;
                    padding: 5px 20px 5px 20px;
                    background-color: green;
                    border-radius: 10px;
                    width: 100px;
                    text-align: center;






                    share|improve this answer













                    Your given code almost ok just use one single line into style sheet
                    in li style use below line



                     list-style-type: none;


                    New li style look like



                    li 
                    margin-top: 40px;
                    padding-left: 75px;
                    list-style-type: none;
                    border-color: white;
                    border-width: 2px;
                    border-style: solid;
                    padding: 5px 20px 5px 20px;
                    background-color: green;
                    border-radius: 10px;
                    width: 100px;
                    text-align: center;







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered 2 hours ago









                    AkborAkbor

                    42456




                    42456



























                        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.




                        draft saved


                        draft discarded














                        StackExchange.ready(
                        function ()
                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369205%2fcentering-an-li-element-without-taking-bullet-point-into-account%23new-answer', 'question_page');

                        );

                        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








                      • Popular posts from this blog

                        Францішак Багушэвіч Змест Сям'я | Біяграфія | Творчасць | Мова Багушэвіча | Ацэнкі дзейнасці | Цікавыя факты | Спадчына | Выбраная бібліяграфія | Ушанаванне памяці | У філатэліі | Зноскі | Літаратура | Спасылкі | НавігацыяЛяхоўскі У. Рупіўся дзеля Бога і людзей: Жыццёвы шлях Лявона Вітан-Дубейкаўскага // Вольскі і Памідораў з песняй пра немца Адвакат, паэт, народны заступнік Ашмянскі веснікВ Минске появится площадь Богушевича и улица Сырокомли, Белорусская деловая газета, 19 июля 2001 г.Айцец беларускай нацыянальнай ідэі паўстаў у бронзе Сяргей Аляксандравіч Адашкевіч (1918, Мінск). 80-я гады. Бюст «Францішак Багушэвіч».Яўген Мікалаевіч Ціхановіч. «Партрэт Францішка Багушэвіча»Мікола Мікалаевіч Купава. «Партрэт зачынальніка новай беларускай літаратуры Францішка Багушэвіча»Уладзімір Іванавіч Мелехаў. На помніку «Змагарам за родную мову» Барэльеф «Францішак Багушэвіч»Памяць пра Багушэвіча на Віленшчыне Страчаная сталіца. Беларускія шыльды на вуліцах Вільні«Krynica». Ideologia i przywódcy białoruskiego katolicyzmuФранцішак БагушэвічТворы на knihi.comТворы Францішка Багушэвіча на bellib.byСодаль Уладзімір. Францішак Багушэвіч на Лідчыне;Луцкевіч Антон. Жыцьцё і творчасьць Фр. Багушэвіча ў успамінах ягоных сучасьнікаў // Запісы Беларускага Навуковага таварыства. Вільня, 1938. Сшытак 1. С. 16-34.Большая российская1188761710000 0000 5537 633Xn9209310021619551927869394п

                        Беларусь Змест Назва Гісторыя Геаграфія Сімволіка Дзяржаўны лад Палітычныя партыі Міжнароднае становішча і знешняя палітыка Адміністрацыйны падзел Насельніцтва Эканоміка Культура і грамадства Сацыяльная сфера Узброеныя сілы Заўвагі Літаратура Спасылкі НавігацыяHGЯOiТоп-2011 г. (па версіі ej.by)Топ-2013 г. (па версіі ej.by)Топ-2016 г. (па версіі ej.by)Топ-2017 г. (па версіі ej.by)Нацыянальны статыстычны камітэт Рэспублікі БеларусьШчыльнасць насельніцтва па краінахhttp://naviny.by/rubrics/society/2011/09/16/ic_articles_116_175144/А. Калечыц, У. Ксяндзоў. Спробы засялення краю неандэртальскім чалавекам.І ў Менску былі мамантыА. Калечыц, У. Ксяндзоў. Старажытны каменны век (палеаліт). Першапачатковае засяленне тэрыторыіГ. Штыхаў. Балты і славяне ў VI—VIII стст.М. Клімаў. Полацкае княства ў IX—XI стст.Г. Штыхаў, В. Ляўко. Палітычная гісторыя Полацкай зямліГ. Штыхаў. Дзяржаўны лад у землях-княствахГ. Штыхаў. Дзяржаўны лад у землях-княствахБеларускія землі ў складзе Вялікага Княства ЛітоўскагаЛюблінская унія 1569 г."The Early Stages of Independence"Zapomniane prawdy25 гадоў таму было аб'яўлена, што Язэп Пілсудскі — беларус (фота)Наша вадаДакументы ЧАЭС: Забруджванне тэрыторыі Беларусі « ЧАЭС Зона адчужэнняСведения о политических партиях, зарегистрированных в Республике Беларусь // Министерство юстиции Республики БеларусьСтатыстычны бюлетэнь „Полаўзроставая структура насельніцтва Рэспублікі Беларусь на 1 студзеня 2012 года і сярэднегадовая колькасць насельніцтва за 2011 год“Индекс человеческого развития Беларуси — не было бы нижеБеларусь занимает первое место в СНГ по индексу развития с учетом гендерного факцёраНацыянальны статыстычны камітэт Рэспублікі БеларусьКанстытуцыя РБ. Артыкул 17Трансфармацыйныя задачы БеларусіВыйсце з крызісу — далейшае рэфармаванне Беларускі рубель — сусветны лідар па дэвальвацыяхПра змену коштаў у кастрычніку 2011 г.Бядней за беларусаў у СНД толькі таджыкіСярэдні заробак у верасні дасягнуў 2,26 мільёна рублёўЭканомікаГаласуем за ТОП-100 беларускай прозыСучасныя беларускія мастакіАрхитектура Беларуси BELARUS.BYА. Каханоўскі. Культура Беларусі ўсярэдзіне XVII—XVIII ст.Анталогія беларускай народнай песні, гуказапісы спеваўБеларускія Музычныя IнструментыБеларускі рок, які мы страцілі. Топ-10 гуртоў«Мясцовы час» — нязгаслая легенда беларускай рок-музыкіСЯРГЕЙ БУДКІН. МЫ НЯ ЗНАЕМ СВАЁЙ МУЗЫКІМ. А. Каладзінскі. НАРОДНЫ ТЭАТРМагнацкія культурныя цэнтрыПублічная дыскусія «Беларуская новая пьеса: без беларускай мовы ці беларуская?»Беларускія драматургі па-ранейшаму лепш ставяцца за мяжой, чым на радзіме«Працэс незалежнага кіно пайшоў, і дзяржаву турбуе яго непадкантрольнасць»Беларускія філосафы ў пошуках прасторыВсе идём в библиотекуАрхіваванаАб Нацыянальнай праграме даследавання і выкарыстання касмічнай прасторы ў мірных мэтах на 2008—2012 гадыУ космас — разам.У суседнім з Барысаўскім раёне пабудуюць Камандна-вымяральны пунктСвяты і абрады беларусаў«Мірныя бульбашы з малой краіны» — 5 непраўдзівых стэрэатыпаў пра БеларусьМ. Раманюк. Беларускае народнае адзеннеУ Беларусі скарачаецца колькасць злачынстваўЛукашэнка незадаволены мінскімі ўладамі Крадзяжы складаюць у Мінску каля 70% злачынстваў Узровень злачыннасці ў Мінскай вобласці — адзін з самых высокіх у краіне Генпракуратура аналізуе стан са злачыннасцю ў Беларусі па каэфіцыенце злачыннасці У Беларусі стабілізавалася крымінагеннае становішча, лічыць генпракурорЗамежнікі сталі здзяйсняць у Беларусі больш злачынстваўМУС Беларусі турбуе рост рэцыдыўнай злачыннасціЯ з ЖЭСа. Дазволіце вас абкрасці! Рэйтынг усіх службаў і падраздзяленняў ГУУС Мінгарвыканкама вырасАб КДБ РБГісторыя Аператыўна-аналітычнага цэнтра РБГісторыя ДКФРТаможняagentura.ruБеларусьBelarus.by — Афіцыйны сайт Рэспублікі БеларусьСайт урада БеларусіRadzima.org — Збор архітэктурных помнікаў, гісторыя Беларусі«Глобус Беларуси»Гербы и флаги БеларусиАсаблівасці каменнага веку на БеларусіА. Калечыц, У. Ксяндзоў. Старажытны каменны век (палеаліт). Першапачатковае засяленне тэрыторыіУ. Ксяндзоў. Сярэдні каменны век (мезаліт). Засяленне краю плямёнамі паляўнічых, рыбакоў і збіральнікаўА. Калечыц, М. Чарняўскі. Плямёны на тэрыторыі Беларусі ў новым каменным веку (неаліце)А. Калечыц, У. Ксяндзоў, М. Чарняўскі. Гаспадарчыя заняткі ў каменным векуЭ. Зайкоўскі. Духоўная культура ў каменным векуАсаблівасці бронзавага веку на БеларусіФарміраванне супольнасцей ранняга перыяду бронзавага векуФотографии БеларусиРоля беларускіх зямель ва ўтварэнні і ўмацаванні ВКЛВ. Фадзеева. З гісторыі развіцця беларускай народнай вышыўкіDMOZGran catalanaБольшая российскаяBritannica (анлайн)Швейцарскі гістарычны15325917611952699xDA123282154079143-90000 0001 2171 2080n9112870100577502ge128882171858027501086026362074122714179пппппп

                        ValueError: Expected n_neighbors <= n_samples, but n_samples = 1, n_neighbors = 6 (SMOTE) The 2019 Stack Overflow Developer Survey Results Are InCan SMOTE be applied over sequence of words (sentences)?ValueError when doing validation with random forestsSMOTE and multi class oversamplingLogic behind SMOTE-NC?ValueError: Error when checking target: expected dense_1 to have shape (7,) but got array with shape (1,)SmoteBoost: Should SMOTE be ran individually for each iteration/tree in the boosting?solving multi-class imbalance classification using smote and OSSUsing SMOTE for Synthetic Data generation to improve performance on unbalanced dataproblem of entry format for a simple model in KerasSVM SMOTE fit_resample() function runs forever with no result