【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
東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。
INDEX
PICK UP
