Question

我对网页样式不是很新鲜，所以我有一个问题。

我尝试使用CSS设置两个链接作为按钮。理想情况下，他们彼此相邻，并且“＃34; about＆＃34;和＆＃34;项目＆＃34;以椭圆形为中心，椭圆形本身在蓝色区域的顶部和底部之间等距离。但是，现在，它们看起来像这样：

links

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

Answer 2

如下所述更改样式。

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;
        line-height: 45px;
        margin:20px 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;
        line-height: 45px;
        margin:20px 5px;
        border:2px solid white;
}

使用CSS将链接中的文本居中

2 个答案: