CODEWITHSUNDEEP
htmlcss
nerdenator
nerdenator

Reputation: 1297

Centering text in a link using CSS

I'm not quite fresh on doing web styling, so I have a question.

I'm trying to set up two links as buttons using CSS. Ideally, they're next to each other and the words "about" and "projects" are centered in the ovals, and the ovals themselves are equidistant between the top and bottom of the blue field. However, right now, they look like this:

links

The HTML is below. The two links are contained within a 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>

For the time being, I have the two link styles placed in separate code blocks. My next step is to merge the two into one where possible, but that's another task for later.

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

What do I need to do to achieve what I want to do?

Upvotes: 0

Views: 38

Answers (2)

j08691
j08691

Reputation: 207901

A quick solution is to set line-height:45px; on the links:

a {
    line-height:45px;
}

jsFiddle example

Upvotes: 2

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

Change styles as mentioned below.

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

Upvotes: 1

Related Questions