ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用してコンテナ内の要素を垂直方向に整列させる方法

CSSを使用してコンテナ内の要素を垂直方向に整列させる方法

王林
王林転載
2020-07-02 17:13:322747ブラウズ

CSSを使用してコンテナ内の要素を垂直方向に整列させる方法

CSS3 Transform を使用すると、コンテナ内の要素の垂直方向の配置を実現できます。

(推奨学習: css クイック スタート )

特定のコード実装:

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

この手法を使用して、単一行のテキストから段落からボックスまでが垂直方向に整列します。

現時点では、ブラウザーによる Transform のサポートには注意が必要です。Chrome 4、Opera 10、Safari 3、Firefox 3、および Internet Explorer 9 はすべて、この属性をサポートしています。

以上がCSSを使用してコンテナ内の要素を垂直方向に整列させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.imで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。