ホームページ > ウェブフロントエンド > htmlチュートリアル > CSSのセンタリング方法とは何ですか?

CSSのセンタリング方法とは何ですか?

零下一度
リリース: 2017-06-24 14:31:27
オリジナル
1634 人が閲覧しました

1.text-align:center;

上記のメソッドを使用して中央揃えにすることは、親コンテナ内の display:inline; のインライン要素またはテキストを水平方向に中央揃えにすることです。

2.inline-height: (高さ) 値;

inline-height を使用する場合、コンテンツを垂直方向に中央揃えするためによく使用されます。

3.margin :auto;

margin to centerを使用する場合、通常、要素が正確な幅の値を指定する場合、margin:auto; または margin: 0 auto; を設定すると、現在の要素が水平方向に中央に配置されます。

使用マージンを使用する場合、margin-left と margin-right の値を同じに設定することもでき、水平方向のセンタリングも実現できます

4. に従って設定します。上と左または下と右に要素を水平に、垂直方向に中央揃えにすることができます。ただし、親要素は高さを設定する必要があります

フレックスコンテナの flex-align:center;

align-items: center;

justify-cotent:center;

項目プロパティ align-self:center;

6. 負のマージン:

 1 .box { 2     width: 600px; 3     height: 400px; 4     position: relative; 5 } 
 6  7 .box1 { 8     width: 300px; 9     height: 200px;10     padding: 20px;11     position: absolute;12     top: 50%;13     left: 50%;14     margin-left: -170px;/*(width+padding)/2 */15     margin-top: -120px;/*(height+padding)/2 */16 }
ログイン後にコピー

上記のコードで要素の水平方向と垂直方向のセンタリングを実現できます。

以上がCSSのセンタリング方法とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート