ブートストラップを使用してボタンを中央に配置する方法

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <button type="button" class="btn btn-outline-primary">Gallary</button>
    </div>
  </div>
</div>
</div> </div>

私はHTMLとブートストラップが初めてです。 Webページの中央に縦横にボタンを配置しようとしています。コンテナを作成し、その中に行を追加しました。行内で、4列のdiv要素をオフセットしました。 div要素の中にボタンがあります。しかし、このボタンは中心にあるようには見えません。 2番目のボタンを追加してそれをオフセットしようとすると、中央に配置されますが、ホバーは機能しません(またはボタンが機能しません)。

2
ru de
@KiranGeorgeソリューション、ドキュメントへのリンク、および実際のコードを確認私が男性の下に投稿したスニペット乾杯。
追加された 著者 AndrewL,
ここにあなたのコードを追加してください。
追加された 著者 Dogukan Cavus,

4 答え

公式の ブートストラップドキュメント に記載されているように、 text-align:center を使用して、クラス名 text-center を親クラスリストに追加し、その子テキスト要素を水平方向に中央揃えにするだけです。


text-center クラス名の使用例については、次のコードスニペットを確認して実行してください。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <div class="col-md-4 col-md-offset-4 text-center">
        <button type="button" class="btn btn-outline-primary">Gallary</button>
    </div>

  </div>
</div>
</div> </div>
0
追加された
うーん……それは変です。リンクにリダイレクトするためのボタンが必要ですか。
追加された 著者 AndrewL,
次に、ボタンの内側にアンカータグをネストする必要があります。答えを更新しましょう。
追加された 著者 AndrewL,
これは私にとってボタンを完璧に配置します。しかし、このボタンはGoogle Chromeでは機能しないようです。リダイレクト、ホバー、またはカーソルはありません。コードスニペットの実行中に機能します。
追加された 著者 Kiran George,
次のページに進むためのボタンとして必要です。
追加された 著者 Kiran George,

ブートストラップにはtext-align:centerのプロパティを持つクラス 'text-center'がすでにあります。子要素を中央揃えにするには、親要素でそれを使用する必要があります。

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4 text-center">
      <button class="btn btn-default">Gallery</button>
    </div>
  </div>
</div>
0
追加された

I made with position:absolute and display:flex

This is vertically and horizontally

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.container {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  justify-content:center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <div class="col-md-4 col-md-offset-4"><button type="button" class="btn btn-outline-primary">Gallary</button>
    </div>

  </div>
</div>
</div> </div>
0
追加された

Bootstrap 4では、テキストブロッククラスを使ってインラインブロックを整列させるべきです。

注:text-align:center。親要素に適用するカスタムクラスで定義したものは、使用しているブートストラップのバージョンに関係なく動作します。それがまさに.text-centerが適用されるものです。

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>
0
追加された