私は2つの列を持つ必要がある小さなWebサイトを作成しようとしており、各列のコンテンツの中央に配置する必要があります。HTML、CSS、ブートストラップ - 2列のセンタリング
しかし、私は、列がお互いの高さに従い、個々の列として動作しないことに気付きました。例えば。列の1つにコンテンツを追加するたびに、他の列の内容がその列の高さに合わせて移動されます。
JSFiddleでは、右側の「Hello」が完全に中央に配置されていないことがわかります。左側の3つの「こんにちは」のうちの最初のものと並んで上に移動しました。あるコラムにコンテンツを追加しても、それが他のコラムには影響しないので、右側の「こんにちは」は理想的には完全に中央に留まるべきです。
JSFiddle：https://jsfiddle.net/goupb2ch/1/
私は今、かなりしばらくの間、これに取り組んできました。何か案は？ありがとう！
フレックスボックスを使用して問題を解決することを検討してください。この場合は、コードをはるかに少なくする必要があります。
https://jsfiddle.net/upwgk2u4/
.container {
display: flex;
text-align: center;
height: 100%;
}
.container > div {
flex: 1;
align-self: center;
}
この回答はブートストラップには決して関係しません。 'display：flex'はCSSのもので、Bootstrapのものではありません。 – Normangorman
@thesystem Flexboxはブートストラップ4に限らず、CSSルールに過ぎません。 FlexboxはBootstrap 4に実装されており、Bootstrap 3では実装されていませんが、Flexboxを使用しているように独自のルールでCSSを拡張できます。ただし、フレックスボックスは古いブラウザではサポートされていません。 – Randy
なぜブートストラップ4ですでに何使わないのでしょうか？ 余分なCSSはありませんが必要です。
https://www.codeply.com/go/0zwGz83Cbw
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<div class="col-md-6 align-self-center text-center">
<p>Hello</p>
</div>
</div>
</div>
はなぜブートストラップ4を使用し、フレックスボックスを利用していませんか？ Flexboxはあなたの願いを実現させます！ – Randy
@Randy入力していただきありがとうございます。もし私が答えを得なければ、私はそれをしなければならないかもしれません。私は3.3.7から始めました。それは最新の安定リリースだから – thesystem
ブートストラップ4は現時点でかなり安定しています。 3.3.7は、私が考えている新しいプロジェクトのためにリリースされた後にすぐに置き換えられるので、フレックスボックスが何をしているのか、なぜそれが痛いのか分かりません。フレックスボックスに関する質問を読んだら、複雑なコードや簡単なフレックスボックスソリューションを使って、自分の質問に何度か答えてくれるでしょう。 – Randy