How to set the title in the middle of the page? - html

Question

I have a title with a button on the right, but I met two problem:
I want the title in the centre of the page;
I want the button and title are in the same horizontal line.
This is my code:
<div class="container">
<div class="row">
<div class="btn btn-primary pull-right">This is a long button</div>
<h1 class="text-center">This is a long title</h1>
</div>
</div>
This is my demo.
Please help me, thanks.

Answer 1

Use this code to attain the desire result:
HTML:
<div class="container">
<div class="row">
<div class="col-xs-2"></div>
<div>
<h1 class="col-xs-8 text-center">This is a long title</h1>
</div>
<div class="btn btn-primary col-xs-2 pull-right mar">Follow</div>
</div>
</div>
CSS:
.mar{
margin-top: 20px;
}

Answer 2

you can use the tags < center > < /center >
example:
<center>long title</center>

Answer 3

Just add this data in a new CSS file or in an existing CSS file.
#bt {
width: 100%;
}
.text-center {
width: 100%;
}
Also add an ID to the button as "bt".

Answer 4

Just zero the margin-top on the h1
.text-center {
margin-top: 0;
}
At least in your code-pen that did the trick.
In the future, in situations like this, always use the inspector on your browser to see the box-model of the element, helps a lot.
If you need more info on the box-model: http://www.w3schools.com/css/css_boxmodel.asp

Answer 5

Make Your Div Width as 100% and make use of Text-align Property.
<h2 style="text-align: center">XYZ</h2>
Then adjust your buttton with margin-top property.
Like this:-
<div class="container">
<div class="row">
<div class="col-xs-2"></div>
<div>
<h1 class="col-xs-8 text-center" **style="margin-top: 0"**>This is a long title</h1>
</div>
<div class="btn btn-primary col-xs-2 pull-right">Follow</div>
</div>
</div>