[CSS]見出しや本文やボタンなど、要素の両側にすぅーと天地中央のラインを配置するテクニック

見出しや本文やボタンなど、一行でも複数行でも要素の両側にすぅーと天地中央のラインを配置するスタイルシートのテクニックを紹介します。

デモのキャプチャ

デモ

実際の動作は、下記ページで確認できます。

サイトのキャプチャ

Horizontal lines around centered content

HTMLやCSSを編集することもできるので、いろいろ試してみてください。

実装

実装は、非常に簡単です。

HTML

天地中央のラインを配置する要素に「.has-lines」を与えます。

CSS

CSSはベンダプレフィックスをいれた版なので、少し長いです。

対応ブラウザ

対応ブラウザはIE11+を含む、すべてのモダンブラウザで動作します。

IE9では疑似要素のmin-widthがうまく機能しません。
Modernizrの「.flexbox」を使って、IE9では非表示するのも一つの手です。

サイトのキャプチャ

Modernizr

top of page

©2017 coliss