今回は知っておくと便利なcssの小技 part15です。
バックナンバー
テキストが空の場合、要素を表示させない
テキストがないときにpaddingだけが残って中途半端に表示されてしまう、なんてことがあったりします。
こういう時はCMSで生成されたりしていることが多いので、phpで処理するのが1番よいかとは思いますがそれが難しいときはcssでも対応できます。
DEMO
HTML
|
1 2 |
<!--↓空の状態に対して:emptyを使ってcssを指定する--> <p class="tag"></p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
.tag{ background:#1AA6C3; color: #FFF; padding: 5px 15px; display: inline-block; border-radius: 5px; } .tag:empty{ display: none; } |
このように:emptyに対してdisplay: none;を指定することで、テキストがないときにはclass=”tag”の要素を表示させない、ということができます。
親要素の幅や高さが可変な時に上下中央に要素を置きたい
要素の幅や高さが可変な時に、上下中央揃えて表示させる方法をご紹介します。
メインビジュアルのテキスト配置などに便利です。
DEMO
HTML
|
1 2 3 |
<div class="bgArea"> <div class="box"> 上下中央に要素を配置 </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.bgArea{ position: relative; width: 100%; min-width: 400px; height: 300px; background: #f2f2f2; } .bgArea .box{ padding: 30px 40px; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); background:#C0DD3B; } |
とりあえず親要素にposition: relative;をしてい、上下中央に配置したいしたい子要素にposition: absolute;を指定します。
そのあとは子要素に対しての指定です。まずはtop: 50%; left: 50%;を指定します。
その次はX軸、Y軸の基準で指定できるtransformを使用します。いずれも50%;の値を指定します。
これで子要素を上下中央に揃えることができます。
