**NOOB ALERT** Centering Page Link

Hi everybody,

Well, I have come a long way with my website at worldreviewgroup.com, and Ronpat has been an absolute God-send when it comes to the progress of this website. I am very proud of it :relaxed:, and I’m starting to use the site more and more. Many of the pages are still blank / empty, but I have added a few pages in there as time has permitted while I have been occupied with my other job.

I know it may seem like I have learned nothing :confounded:, but here I am trying to center a page link. Along with my YouTube viewership, I would like to host my (and their) legal documents on my site. My viewers will be paying me to post their documents, and the volume will stack up very quickly because I have a lot of viewers. That requires a new section to my site which I will call the Public Records section, and I have created a new link element for my site. That new < a> element I have not been able to center as of yet. It falls within the main .content < div> and within a new container I gave a class of “centeredlink”, but I am trying to figure out what is preventing me from applying margin: 0 auto; to this link / div. I am able to add a margin of 40% or so which “centers” the link, but I don’t think this is the optimal way of doing this. If you view the website, you can see the Public Records link hanging out on the left side just below the drop-down menus.

I’m very confident I can handle making a new Public Records page that will be responsive to all browsers, but I will keep you updated on my progress as I am working on it right now and may make new posts regarding the optimization of said page. For now, the focus is on centering this link which seems simple, but I don’t think I have found the best solution just by adding a left margin to the link.

homepage.css (starting at line 516):

    /* ******** PUBLIC RECORDS LINK ********* */
    div.centeredlink{
	    padding-bottom:10px;
	    margin:0 auto;
    }
    div.centeredlink a{
	    font-size:16pt;
    }
    div.centeredlink a:hover, div.centeredlink a:focus{
	    color:#4d4dff;
	    text-decoration:none;
    }
    div.centeredlink a:visited{
	    color:#ff0000;
    }

index.html (line 308):

    <div class="centeredlink">
        <a href="publicrecords.html">Public Records Section</a>
    <div>

It appears that code formatting may still be faulty as the code I have copied does not format properly.

Thanks for all of your help, everyone. Long live SitePoint. R.I.P. felgall. :slight_smile:

-ty

You could try text-align on the link’s container, like:

div.centeredlink{
        padding-bottom:10px;
        margin:0 auto;
        text-align: center; /* applies on inline content */
    }

Please use the </> button to fomat code snippets in your post.

1 Like

Erik_J,

That works perfectly!! Thank you so much for taking the time! I will do the same. :astonished:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.