Html heading and link in the same line

Question

I am new to css. I want to display a heading h2 in the center and a link in the right end in the same line.

I tried a few options, but all of them align the heading to the left. Any help is appreciated.

Thanks.

Answer 1

There are a few ways you can do this. The simplest and quickest way that I can think of is using a parent div and putting the heading and link inside it. So your HTML will look like this:

<div class="test">
    <h2>Heading comes here</h2><a href="">Link comes here</a>
</div>

Your styles can be as follows:

.test {
    text-align: center;
}
h2 {
    display: inline-block;
}

a {
    float: right;
}

Answer 2

Write like this:

HTML

<h1>heading <a href="#">link</a></h1>

CSS

h1{
    text-align:center;
}
h1 a{
    float:right;
}

Check this http://jsfiddle.net/KJSmB/