html - 使用 CSS 在链接中居中文本

Question

我对网页样式设计不太熟悉，所以我有一个问题。

我正在尝试使用 CSS 将两个链接设置为按钮。理想情况下，它们彼此相邻，“关于”和“元素”这两个词位于椭圆的中心，椭圆本身在蓝色区域的顶部和底部之间等距。然而，现在，它们看起来像这样:

HTML 如下。这两个链接包含在一个 div 中。

<!--div for about button and projects button.-->
<div id="tophalf">
    <a id="aboutlink" href="/about.aspx">about</a>
    <a id="projectslink" href="/projects.aspx">projects</a>
</div>

目前，我将两种链接样式放在不同的代码块中。我的下一步是尽可能将两者合并为一个，但这是以后的另一项任务。

div#tophalf{
    background-color:#1A3380;
    height:90px;
    text-align:center;
}

a#aboutlink{
        text-decoration:none;
        background-color:#1A3380;
        color:#808080;
        border-radius:30px;
        -moz-border-radius:30px;
        -webkit-border-radius:30px;
        position:absolute;
        left:0px;
        width:48%;
        height:45px;
        margin:5px;
        border:2px solid white;
}

a#projectslink{
        text-decoration:none;
        background-color:#1A3380;
        color:#808080;
        border-radius:30px;
        -moz-border-radius:30px;
        -webkit-border-radius:30px;
        position:absolute;
        right:0px;
        width:48%;
        height:45px;
        margin:5px;
        border:2px solid white;
}

我需要做什么才能实现我想做的事？

Answer 1

一个快速的解决方案是在链接上设置 line-height:45px;:

a {
    line-height:45px;
}

jsFiddle example