如何水平和垂直居中列出项目

Question

我需要以列表项目（累积奖金，市场等）为中心。我要将链接保留在列表中，但至于徽标，我不确定是否有更清洁的方式。请帮忙！

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

这是一个关于它现在的样子的链接。

我基本上想要将徽标保留在列表中，但不要将其放在列表中，同时将文本放在标题的中间。 我应该创建一个新的课程还是div？我是编码的新手，所以我不太确定。如果您确实留下了回复，请添加整段代码，以便我可以看到它，而不是说“添加此”。