【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
コンテンツの高さが異なる要素を横並びにしているとき、高い要素に合わせて可変させつつ、コンテンツは真ん中に配置する方法です。
▼HTML
|
1 2 3 4 |
<div class="demo"> <div class="box red center"><b>長い文章長い文章長い文章長い文章長い文章長い文章長い文章</b></div> <div class="box green center"><b>短い文章</b></div> </div> |
▼CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.demo { /** 高さ揃えるcss**/ display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; /** 真ん中寄せ **/ } .demo .box { width: 200px; background: #f71137; padding: 20px; color: #fff; margin: 20px; text-align: center; /** 以下中央揃え**/ display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .demo .green { background: #00c1a6; } |
KOHIMOTO LABO
WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。
INDEX
PICK UP
