ページの中央にタイトルを設定するにはどうすればよいですか？

Question

私は右のボタンでタイトルを持っているが、私は2つの問題が会った：私は、ページの中央にタイトルをしたい

• を。

• ボタンとタイトルは同じ水平線にしたいです。

これは私のコードです：

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

これが私のdemoです。

よろしくお願いいたします。

Answer 1

使用欲求の結果を達成するために、このコード：

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

このデータを新しいCSSファイルまたは既存のCSSファイルに追加するだけです。

#bt { 
width: 100%; 
} 

.text-center { 
width: 100%; 
} 

また、ボタンにIDを「bt」として追加します。

Answer 3

ただ少なくとも、トリックをしたあなたのコードペンでH1

.text-center { 
    margin-top: 0; 
} 

上のマージントップをゼロ。

将来、このような状況では、常にブラウザのインス​​ペクタを使用して要素のボックスモデルを表示し、多くの手助けをします。 ボックスモデルに関する詳細情報が必要な場合：http://www.w3schools.com/css/css_boxmodel.asp

Answer 4

div-widthを100％にして、Text-alignプロパティを使用します。

<h2 style="text-align: center">XYZ</h2> 

次に、margin-topプロパティでバットンを調整します。このよう

： -

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