How can I center list items horizontally and vertically

Question

I need my list items, (jackpot, market, etc.) to be centered. I'm going to keep the link in the list, but as for the logo, I'm not sure if there is a cleaner way. Please help!

HTML

<div id="wrap">
    <!-- HEADER BEGIN -->
    <header class="page-header">
        <nav class="navbar mainmenu" role="navigation">
            <div class="container">
                <div id="navcontainer">
                    <!-- BEGIN TABS -->
                    <ul>
                        <a id="index" class="page-logo" href="/">
                            <img src="slamlogo.png" alt="Logo">
                            <li>
                                <a href="/Jackpot">Jackpot</a>
                            </li>

                            <li>
                                <a href="/Profile">Profile</a>
                            </li>

                            <li>
                                <a href="/Market">Market</a>
                            </li>

                            <li>
                                <a href="/Support">Support</a>
                            </li>

                            <a href="https://steamcommunity.com/openid/login?openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&amp;openid.mode=checkid_setup&amp;openid.return_to=http%3A%2F%2Fcsgobuddy.net%2Findex.php&amp;openid.realm=http%3A%2F%2Fcsgobuddy.net&amp;openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&amp;openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select"><img
                                    style="margin-top:15px;margin-right:5px"
                                    src="http://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_small.png"></a>
                    </ul>
                </div>

            </div>
        </nav>
    </header>
</div>

CSS

body { 
    background: #800000;
    color: ;
    margin: 0px;
}

header {
    background: #E5E5E5;
    color: ;
}

#navcontainer ul { 
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 23px;
    color: #800000;
}

#navcontainer ul li { 
    display: inline; 
}

#navcontainer ul li a { 
    text-decoration: none; 
    padding: 0px;
    margin: 40px;
    color: #800000;
}

#navcontainer ul li a:hover {
    color: #fff;
    background-color: #800000;
}

a:visited {
    color : #800000;
}

Here is a link as to what it looks like now.

I basically want to keep the logo where it is but not have it in the list, and at the same time, put the text in the middle of the header. Should I make a new class or div? I'm new to coding so I'm not quite sure. If you do leave a response please add the whole section of code so I can see it instead of saying "add this".