【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.
コンテンツの高さが異なる要素を横並びにしているとき、高い要素に合わせて可変させつつ、コンテンツは真ん中に配置する方法です。
▼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; } |
Web Trends Lab.編集部
KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。
INDEX
PICK UP
KOHIMOTOは実用的なWebサイトを追求するWeb制作会社です。
現場から最前線のWebトレンドやノウハウなどをお届けしていきます。
