divを中央の2つのインラインボタン（css）に合わせるにはどうすればいいですか？

私は現在、ブートストラップを使用してWebページを設計していると私は<div class="jumbotron"></div>divを中央の2つのインラインボタン（css）に合わせるにはどうすればいいですか？

の内部相互にインラインレイアウト2つの<a>のボタンを持っているがここではHTMLコードです：

<div class="jumbotron hub-jumbo"> 
     <div class="hub-header"> 
      <div class="container"> 
       <h2 class="txt-white">Jason's Summer Vacation</h2> 
       <p class="txt-white">There doesn't seem to be a description here!</p> 
      </div> 
     </div> 
     <div class="hub-btns"> 
      <a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a> 
      <a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a> 
     </div> 
    </div>

そしてここでは、div要素の折り返しのCSSですボタンとボタン自身：

.hub-btns { 
    display: inline-block; 
    margin: auto; 
} 

.hub-btns .copy-link { 
    border-bottom-color: #EBEBEB; 
} 

.hub-btns .create-drop:hover { 
    background-color: #03a9f4; 
} 

.hub-btns .create-drop:focus { 
    background-color: #03a9f4; 
    border-bottom-color: #0398db; 
} 

.hub-btns a { 
    margin: 0 10px; 
}

私はまだCSSで素晴らしいじゃないので、私はおそらくここに何かを明らかに不足しています。しかし、私は単純に2つのボタンをラップしているdivをジャンボトロンのdiv内に配置したいと思っています。

すべてのヘルプは大歓迎です！

出典

2016-09-10 Jason Procka

答えがあなたに役立つ場合、その答えを受け入れるといいでしょう。 – Randy

あなたがしようとしていることを見ることなく手助けするのはちょっと面倒です。 .hub-btnsの中にtext-align: center;を追加すると、それらのボタンを中央に揃えるのに十分なはずです。

また、アンカー/ボタンを直接適用する代わりにmargin: 0 10px;を.hub-btnsに移動しています。

最後に、古いブラウザをサポートする必要がない場合は、フレックスボックスの基本を学ぶために少し時間をかけてみてください。それは、私たちの人生を「ものを整列させる」という点でもっと簡単にします。

出典

2016-09-10 00:50:06 rafaelbiten

素敵な、私のチームメイトは、私がこれをチェックしていたように右に追加しました。ありがとう！ –

私は、クラス名にいくつかの変更を加えました（スペースを削除しました）。 HTMLで

<html> 
 
<head> 
 
<style> 
 
.jumbotron-hub-jumbo { 
 
margin: 0 auto; 
 
border:2px solid black; 
 
width:300px; 
 
} 
 

 
.hub-btns { 
 
    margin: 0 auto; 
 
\t width:200px; 
 
\t border:2px solid green; 
 
} 
 

 
.hub-btns .copy-link { 
 
    border-bottom-color: #EBEBEB; 
 
} 
 

 
.hub-btns .create-drop:hover { 
 
    background-color: #03a9f4; 
 
} 
 

 
.hub-btns .create-drop:focus { 
 
    background-color: #03a9f4; 
 
    border-bottom-color: #0398db; 
 
} 
 

 
.hub-btns a { 
 
\t width:200px; 
 
\t border: 2px solid red; 
 
    margin: 0 10px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
    <div class="jumbotron-hub-jumbo"> 
 
     <div class="hub-header"> 
 
      <div class="container"> 
 
       <h2 class="txt-white">Jason's Summer Vacation</h2> 
 
       <p class="txt-white">There doesn't seem to be a description here!</p> 
 
      </div> 
 
     </div> 
 
     <div class="hub-btns"> 
 
      <a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a> 
 
      <a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a> 
 
     </div> 
 
    </div> 
 
\t </body> 
 
</html>

私だけ変更されたクラス、私はあなたがCSSに新しいしていると述べましたjumbotron hub-jumbo

は、HTMLとCSSをマージ見て恐れることはありません。ここでは、コードです一緒に。スタイル部分をカットしてstyle.cssに貼り付けます。

出典

2016-09-10 00:59:56

divを中央の2つのインラインボタン（css）に合わせるにはどうすればいいですか？

答えて

関連する問題