ブートストラップ4を使用して、ページの中央にコンテナーを配置しようとしています。これまでのところ、うまくいきませんでした。任意の助けいただければ幸いです。
私はそれをCodepen.ioで構築したので、皆さんはそれを試してみて、アイデアから私が何をしているのかを教えてください...
ブートストラップ4を使用して、ページの中央にコンテナーを配置しようとしています。これまでのところ、うまくいきませんでした。任意の助けいただければ幸いです。
私はそれをCodepen.ioで構築したので、皆さんはそれを試してみて、アイデアから私が何をしているのかを教えてください...
回答:
重要! 垂直方向の中心は、親の高さを基準にしています
あなたが中央にしようとしている要素の親が何も定義されている場合は 、高さが、どれも垂直センタリングソリューションのは動作しません!
次に、Bootstrap 4の垂直方向の中央揃えに...
あなたは、新しい使用することができますフレキシボックス&サイズのユーティリティを作るためにcontainer
フルハイトをしてdisplay: flex
。これらのオプションでは、追加のCSSは必要ありません(ただし、コンテナーの高さ(つまり、html、body)は100%でなければなりません)。
align-self-center
フレックスボックスの子のオプション1
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://www.codeply.com/go/fFqaDe5Oey
align-items-center
フレックスボックスの親のオプション2(.row
is display:flex; flex-direction:row
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://www.codeply.com/go/BumdFnmLuk
justify-content-center
フレックスボックスの親のオプション3(.card
is display:flex;flex-direction:column
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/3gySSEe7nd
Bootstrap 4の垂直方向の中央揃えの詳細
Bootstrap 4がフレックスボックスやその他のユーティリティを提供するようになったため、垂直方向の配置には多くのアプローチがあります。http://www.codeply.com/go/WG15ZWC4lf
1-自動マージンを使用した垂直中心:
垂直方向に中央揃えするもう1つの方法は、を使用することmy-auto
です。これにより、要素がそのコンテナの中央に配置されます。たとえばh-100
、行を完全な高さにしてmy-auto
、col-sm-12
列を垂直方向に中央揃えにします。
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
my-auto
垂直y軸のマージンを表し、以下と同等です。
margin-top: auto;
margin-bottom: auto;
2-Flexboxを備えた垂直中心:
Bootstrap 4 .row
は現在、任意の列でdisplay:flex
使用align-self-center
して垂直方向に中央揃えすることができます...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
または、align-items-center
全体.row
を使用してcol-*
、行のすべてを垂直方向に中央揃えにします...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
3-表示ユーティリティを使用した垂直中心:
ブートストラップ4が有する表示utilsのために使用することができるdisplay:table
、display:table-cell
、display:inline
、など。これらを一緒に使用することができる垂直配向utilsの整列インラインに、インラインブロック又はテーブルセル要素。
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
その他の例
垂直方向の中央の画像<div>
垂直方向の中央の.containerの行
垂直方向の中央と垂直方向の中央の下部<div>
親の内側の子
垂直方向の中央全画面ジャンボトロン
重要! 私は身長に言及しましたか?
垂直方向の中央揃えは、親要素の高さを基準にしていることに注意してください。ページ全体を中央に配置したい場合は、ほとんどの場合、これがCSSになります...
body,html {
height: 100%;
}
または、親/コンテナでmin-height: 100vh
(min-vh-100
Bootstrap 4.1以降)を使用します。子要素を親の中央に配置する場合。親には高さが定義されている必要があります。
親コンテナーをflexにして以下を追加することにより、コンテナーを垂直方向に配置できますalign-items:center
。
body {
display:flex;
align-items:center;
}
html, body {height:100%}
...それを追加するとうまくいきました!ありがとう!
上記のどれもうまくいかなかったため、別の答えを追加します。
目標:ブートストラップ4フレックスボックスクラスを使用して、ページのdivを垂直方向および水平方向に揃えます。
ステップ1:最も外側のdivをの高さに設定します100vh
。これにより、高さがビューポートの高さの100%に設定されます。これを行わないと、他に何も機能しません。の高さの設定100%
は親を基準にしているため、親がビューポートの高さ全体ではない場合、何も機能しません。下の例では、ボディを100vhに設定しています。
ステップ2:コンテナーdivをd-flex
クラスのあるflexboxコンテナーに設定します。
ステップ3:divをjustify-content-center
クラスの水平方向の中央に配置します。
ステップ4:divを垂直方向に中央揃え align-items-center
ステップ5:ページを実行し、垂直方向と水平方向に中央揃えされたdivを表示します。
中央のdiv自体(子div)に設定する必要のある特別なクラスはないことに注意してください
<body style="background-color:#f2f2f2; height:100vh;">
<div class="h-100 d-flex justify-content-center align-items-center">
<div style="height:600px; background-color:white; width:600px;">
</div>
</div>
</body>
100vh
トリックは私を助けてくれました。ブートストラップもvh-100
このためのクラスを提供します。
Bootstrap 4(ベータ版)では、を使用しますalign-middle
。垂直方向の配置については、Bootstrap 4のドキュメントを参照してください。
垂直配置 ユーティリティを使用して要素の配置を変更します。vertical-alignは、inline、 inline-block、inline-table、および表のセル要素にのみ影響することに注意してください。
選択し
.align-baseline
、.align-top
、.align-middle
、.align-bottom
、.align-text-bottom
、および.align-text-top
必要に応じて。
<div class="col-lg-5 col-sm-5 offset-1 d-flex">
<div class="offer-txt justify-content-center align-self-center">
<span class="inner-title">Our Offer</span>
<h2 class="section-title">Today’s Special </h2>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="/assets/images/ebook2.png" alt="" class="img-fluid">
</div>
<div class="col-md-6 my-auto">
<h3>Heading</h3>
<p>Some text.</p>
</div>
</div>
この行は、マジックが起こるところで<div class="col-md-6 my-auto">
、my-auto
列の内容を中心に説明します。これは、上記のコードサンプルのように、サイズが変化する画像があり、列のテキストを適切な位置に配置する必要がある場合に最適です。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row align-items-center justify-content-center" style="height:100vh;">
<div>Center Div Here</div>
</div>
</div>
</body>
</html>
flex-grow-1
クラスをカードに追加すると、縮小できなくなります。
垂直位置合わせこのブートストラップ4クラスを使用:
親:dテーブル
そして
子:d-table-cell&align-middle&text-center
例えば:
<div class="tab-icon-holder d-table bg-light">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
親をサークルにしたい場合:
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
次の2つのカスタムCSSクラスはどれですか。
.tab-icon-holder {
width: 3.5rem;
height: 3.5rem;
}
.rounded-circle {
border-radius: 50% !important
}
最終的な使用法は、たとえば次のようになります。
<div class="col-md-5 mx-auto text-center">
<div class="d-flex justify-content-around">
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Lg.png" height="30rem">
</div>
</div>
...
</div>
</div>
.my-auto
yor divで(bootsrap4)cssクラスを使用