ボタングループを中央に揃える方法は？ Html css

-2

私はグループに2つのボタンがあり、見出しの下にそれらを整列させたいと思います。私は左に300pxのパディングを試みましたが、画面のサイズを変更するとすべてが動き出します。基本的にページの中央にボタンを配置する方法は？？ボタングループを中央に揃える方法は？ Html css

.btn-toolbar { 
 
    margin-left:-5px; 
 
} 
 

 
* { 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 

 
.container { 
 
    margin-right:auto; 
 
    margin-left:auto; 
 
    padding-left:15px; 
 
    padding-right:15px; 
 
    text-align:center; 
 
    align-content:center; 
 
} 
 

 
body { 
 
    font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size:14px; 
 
    line-height:1.42857143; 
 
    color:#666666; 
 
    background-color:#ffffff; 
 
} 
 

 
html { 
 
    font-family:sans-serif; 
 
    -ms-text-size-adjust:100%; 
 
    -webkit-text-size-adjust:100%; 
 
} 
 

 
html { 
 
    font-size:10px; 
 
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
 
} 
 
.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group { 
 
    text-align:center; 
 
    align-content:center; 
 
} 
 

 
.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group { 
 
    float:left; 
 
} 
 

 
.btn-toolbar > .btn, .btn-toolbar > .btn-group, .btn-toolbar > .input-group { 
 
    margin-left:5px; 
 
} 
 

 
.btn-group, .btn-group-vertical { 
 
    position:relative; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
}

<div class="btn-toolbar"> 
 
    <div role="group" class="btn-group"> 
 
     <button class="btn btn-default" type="button">Compare Selected Aircraft</button> 
 
     <button class="btn btn-default" type="button">Reset Selected Aircraft</button> 
 
    </div> 
 
</div>

出典

2017-03-27 Hosh Adf

より良いあなたを助けるためにバイオリンを追加してください。 :)フレックスボックスで試すことができます。 –

あなたの見出しはどこですか？ – dippas

@dippasコンテナ内で、ボタンのすぐ上にある –

だけ表示を追加：ブロック;マージン：0 auto; btn-groupクラスに渡し、float：leftを削除します。ボタンから：

.btn-toolbar { 
 
    margin-left:-5px; 
 
} 
 

 
* { 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 

 
.container { 
 
    margin-right:auto; 
 
    margin-left:auto; 
 
    padding-left:15px; 
 
    padding-right:15px; 
 
    text-align:center; 
 
    align-content:center; 
 
} 
 

 
body { 
 
    font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size:14px; 
 
    line-height:1.42857143; 
 
    color:#666666; 
 
    background-color:#ffffff; 
 
} 
 

 
html { 
 
    font-family:sans-serif; 
 
    -ms-text-size-adjust:100%; 
 
    -webkit-text-size-adjust:100%; 
 
} 
 

 
html { 
 
    font-size:10px; 
 
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
 
} 
 
.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group { 
 
    text-align:center; 
 
    align-content:center; 
 
} 
 

 
.btn-group { 
 
    margin:0 auto; 
 
    display:block; 
 

 
.btn-toolbar > .btn, .btn-toolbar > .btn-group, .btn-toolbar > .input-group { 
 
    margin-left:5px; 
 
} 
 

 
.btn-group, .btn-group-vertical { 
 
    position:relative; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
}

<div class="btn-toolbar"> 
 
    <div role="group" class="btn-group"> 
 
     <button class="btn btn-default" type="button">Compare Selected Aircraft</button> 
 
     <button class="btn btn-default" type="button">Reset Selected Aircraft</button> 
 
    </div> 
 
</div>

出典

2017-03-27 11:10:04

正確に何を追加しましたか？ –

@HoshAdf display：blockを追加しました。マージン：0 auto; btnグループのクラスに移動し、フロートを削除しました。私の答えに記載されているようにボタンから –

優秀！ありがとうございました:) –

-1

テキスト整列でこのシンプルなもの、試してみてください：センターを。

<div class="btn-toolbar"> 
<div role="group" class="btn-group" style="text-align:center"> 
    <button class="btn btn-default" type="button">Compare Selected Aircraft</button> 
    <button class="btn btn-default" type="button">Reset Selected Aircraft</button> 
</div>

出典

2017-03-27 11:05:09

ボタングループを中央に揃える方法は？ Html css

答えて

関連する問題