Q&A
前提・実現したいこと
bootstrap練習中です。
gridを作っていて、緑のcolumnの中で黄色のrown二行を、垂直方向に中心に寄せたいのですがうまくいきません。よろしくお願いいたします。
該当のソースコード
bootstrap
1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>GETTING STARTED WITH BRACKETS</title> 8 <meta name="description" content="Bootstrap Basics"> 9 10 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 12 <link rel="stylesheet" hrefs="styles.css"> 13 14 </head> 15 <body> 16 <div class="container-fluid"> 17 <div class="row" style="height: 200px;"> 18 19 <div class="col-4 bg-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quisquam blanditiis qui ad, iusto quae vitae labore fugiat at dolore deleniti atque impedit libero molestias natus, veritatis laborum ullam veniam.</div> 20 21 <div class="col-4 bg-success"> 22 <div class="row bg-warning">nested column1 bottom1</div> 23 <div class="row bg-warning">nested column2 bottom2</div> 24 </div> 25 26 <div class="col-4 d-flex bg-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore in possimus, laborum ratione autem officiis culpa accusamus, iusto distinctio ipsum placeat soluta, aliquam debitis nostrum aliquid totam eveniet nesciunt obcaecati!3 27 </div> 28 29 </div> 30 31 </div> 32 33 34 <script 35 src="https://code.jquery.com/jquery-3.3.1.min.js" 36 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 37 crossorigin="anonymous"></script> 38 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 39 40 </body> 41</html> 42
試したこと
・緑のcolumnのclass内にalign-items-centerを記述
・黄色のrowのclass内にalign-items-centerを記述
・緑のcolumn内にrowを作りclass内にalign-items-centerを記述したのち、既存の黄色のrowをcolomnに変更していれる
補足情報（FW/ツールのバージョンなど）
Bootstrap4.2.1
HTML
回答1件
0
ベストアンサー
d-flex flex-column justify-content-center を追加。
HTML
1<div class="col-4 bg-success d-flex flex-column justify-content-center">
投稿2019/02/07 04:30
総合スコア13749
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/07 04:35