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

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

王林
リリース: 2020-07-02 17:13:32
転載
2748 人が閲覧しました

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 までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート