コンテンツを垂直方向に整列させる6つのCSSトリック
CSSでの垂直方向の配置について、またはそれを実行できないようにするためのより正確な方法について説明しましょう。 CSSは、コンテナー内でコンテンツを垂直方向に中央揃えするための正式な方法をまだ提供していません。それはおそらくどこでもWeb開発者をいらいらさせた問題です。しかし、この記事では、恐れないように、私たちはあなたを助けることができるいくつかのトリックをあなたによって実行するつもりです。 効果を真似る.
ただし、これらのトリックには制限があります。 複数のトリックを使う 幻想を完成させる。あなたが他のトリックを知っているならば、コメントで私たちに知らせてください.
1.絶対位置を使用する
ここで見る最初のトリックは、 最初にコンテナ要素の位置をrelativeに設定し、次に子要素の位置をに設定します。 垂直方向に整列するには、子要素の位置を上からコンテナの高さの半分だけ移動し、子要素の幅の半分だけ引き上げます。これが出力です： このトリックは、子要素が1つしかない場合は完璧です。 CSS3変換 コンテンツを中央に配置するのが簡単になりました。 CSS3変換とは異なり、 前のメソッドと同じHTML構造、つまり1つの親、1つの子要素があるとします。 - ただし、CSS 3変換はInternet Explorer 8以下では機能しません。代替手段として、ここで他の方法を使用することをお勧めします。. 私達も使用できます このトリックは、コンテナを固定幅に設定しない場合に適しています。幅を単に次のように設定します。 コンテナ内にテキストコンテンツが1行しかない場合は、次のコマンドを使用してテキストを垂直方向に揃えることができます。 このトリックは1行のテキストでのみ機能することを忘れないでください。内容が2行以上に分かれている場合、各行の間のスペースは、で指定したとおりになります。 個人的には、CSS Tableを使用するのが、垂直方向の配置を適用するための私のお気に入りのトリックです。これはInternet Explorer 8のような古いブラウザで動作します。この方法はコンテナ要素の表示を 垂直方向のセンタリングの最後の方法は、Flexboxを使用することです。 FlexboxはCSS 3の新しいモジュールです。コンテンツを整列させるためのより直接的な方法を提供します。コンテンツをフレックスボックス内で垂直方向に中央揃えするには、単に追加します。 Flexboxの一部のブラウザは、Internet Explorer 10、Safari、6、Chrome 27以下などのFlexboxモジュールのパーシャル機能のみをサポートすることに注意してください。したがって、CSS3変換のトリックと同様に、効果がこれらのブラウザでうまく落ちることを確認してください.ポジション 財産。 2つあります 絶対の. これにより、コンテナ全体に自由に配置できます。. 絶対の 位置は同じコンテナ内の他の要素に影響します.2. CSS3変換を使う
ポジション プロパティ、同じコンテナ内の他の要素の位置には影響しません.50％ 上からCSS変換を使用すると、 -50％. そして、あなたはそれを持っています.3.パディングを使う
パディング 垂直方向の配置の錯覚を作成します。そのためには、以下のように上部と下部のパディングを等しく設定します。自動.4.線の高さを使う
行の高さ 財産。をセットする 行の高さ コンテナの高さとほぼ同じ値で、次のように出力されます。.行の高さ, 余りにも多くの空白を与えて.5. CSSテーブルを使う
表, 子要素は次のように表示されます。 テーブルセル それから 垂直整列 テキストを垂直方向に中央揃えするプロパティ.6. Flexboxを使う
整列項目：中央。 次のように.
