Bootstrap 4 を使用して、コンテナーをページの中央に配置しようとしています。これまでのところ、うまくいきません。ご協力いただければ幸いです。
私はこれをコードペン皆さんも試してみて、何がうまくいくか教えてください。私にはアイデアがほとんどないのですが...
var currentAuthor = "";
var currentQuote = "";
function randomQuote() {
$.ajax({
url: "https://api.forismatic.com/api/1.0/?",
dataType: "jsonp",
data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
success: function( response ) {
$("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
$("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
currentAuthor = response.quoteAuthor;
currentQuote = response.quoteText
}
});
}
function openURL(url){
window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}
function tweetQuote(){
openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}
$(document).ready(function () {
randomQuote();
$("#get-another-quote-button").click(function(){
randomQuote();
});
$('#tweet').on('click', function() {
tweetQuote();
});
});
html, body {
background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
background-color: #17234E;
margin-bottom: 0;
min-height: 30%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
.btn-new-quote {
color: #0C0C0D;
background-color: transparent;
border-color: #414147;
}
.btn-new-quote:hover {
color: #0C0C0D;
background-color: #9A989E;
border-color: #0C0C0D;
}
#tweet {
color: RGB(100, 100, 100);
}
#tweet:hover {
color: RGB(50, 50, 50);
}
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
opacity: .85;
border-color: RGB(50, 50, 50);
padding-bottom: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center align-self-center">
<div class="col-sm-6">
<div class="jumbotron vertical-center text-center">
<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
<p id="quote-author" class="lead"><em></em></p>
<hr class="my-2">
<div class="row align-items-center justify-content-between">
<div class="col-sm-1-4 text-left">
<a id="tweet" href="#">
<h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
</a>
</div>
<div class="col-sm-1-4 text-right">
<button id="get-another-quote-button" type="button" class="btn btn-outline-secondary btn-new-quote">Don't Quote Me on This...</button>
</div>
</div>
</div>
</div>
</div>
</div>
ベストアンサー1
重要! 垂直中心は親の高さに相対します
中央揃えにしようとしている要素の親に高さが定義されていない場合、垂直方向の中央揃えソリューションはどれも機能しません。
さて、垂直方向の中央揃えについて...
Bootstrap 5 (2021年更新)
Bootstrap 5 は依然としてflexboxベースであるため、垂直方向の中央揃えは Bootstrap 4 と同じように機能します。たとえば、align-items-center
またはjustify-content-center
自動マージンを flexbox の親 (row
またはd-flex
) で使用できます。
align-items-center
フレックスボックスの行の親(row
またはd-flex
)で使用するjustify-content-center
フレックスボックスの列の親で使用する(d-flex flex-column
)my-auto
フレックスボックスの親で使用する
ブートストラップ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://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://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://codeply.com/go/3gySSEe7nd
Bootstrap 4 垂直センタリングの詳細
Bootstrap 4ではフレックスボックスが提供され、その他のユーティリティ垂直方向の配置にはさまざまなアプローチがあります。http://www.codeply.com/go/WG15ZWC4lf
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>
中央揃えにしながらも高さを均等に保つには、このQ/Aを参照してください。
3 - ディスプレイユーティリティを使用した垂直中央配置:
Bootstrap 4にはディスプレイユーティリティdisplay:table
、、などに使用できます。これらはdisplay:table-cell
、display:inline
垂直配置ユーティリティインライン、インラインブロック、またはテーブルセル要素を揃えます。
<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 内の垂直中央の .row
垂直中央と下部<div>
親の内側に垂直中央の子を配置
垂直中央フルスクリーンジャンボトロン
重要! 身長については言及しましたか?
垂直方向の中央揃えは親要素の高さを基準にしていることに留意してください。ページ全体を中央揃えにしたい場合は、ほとんどの場合、CSS を次のように設定する必要があります...
body,html {
height: 100%;
}
または、親/コンテナでmin-height: 100vh
( min-vh-100
Bootstrap 4.1 以降) を使用します。子要素を親の中央に配置する場合、親には高さが定義されている必要があります。