Clever Geek Handbook

HTML header and link on the same line

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

I tried several options, but they all align the title to the left. Any help is appreciated.

Thank.

+3


source to share


2 answers


There are several ways to do this. The easiest and fastest way I can think of is to use a parent div and put a title and link in 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;
}
+9


source


Write like this:

Html

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


CSS

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

Check http://jsfiddle.net/KJSmB/

+1


source






More articles:


All Articles