CSS 縦方向 center_html/css_WEB-ITnose

... height、inline-height は親要素の高さに設定されます

HTML

< div id ="container" > }

2. 垂直方向の中央揃え: 複数行のインライン要素の解決策

中央揃えの要素: 複数行のインライン要素

解決策: 組み合わせ display:table-cell とvertical-align:middle を使用します属性を使用して、中央に配置する必要がある要素の親要素を定義します

HTML

< div id ="container" > < a href ="#" >エリート＆lt;/ gt; : table-cell;

vertical-align: middle;

a {
Color: #fff;




3. 垂直方向の中央揃え: 既知の高さのブロック要素の解決策

中央揃えの要素: block- div などの level 要素

解決策: 要素を中央に配置します。要素を絶対位置に設定し、そのマージン上部の値を中央に配置する要素の高さの負の半分に設定します。

HTML < div class ="item" >

CSS

div {

width: 100px;

背景: #222; }

/* 以下はセンタリングコードです*/

.item {
position:Absolute;
margin-top:-50px;
padding:0; -top は、transform 属性の値に基づいて計算されます

HTML

< div class ="item" >

ipsum dolor sit amet, consectetur adipisicing elit. / div >

CSS


div {
width: 150px;
color: #fff;
/* 以下はセンタリングコードです*/
.item {
location:絶対 ;
上: 50%;

変換: translationY(-50%)

5. 既知の幅と高さの要素ソリューション

センタリングタイプ: 垂直方向と水平方向を同時に中央揃えします (要素の高さと幅がわかっている場合)

解決策: 要素を絶対位置に設定し、margin-top (高さ/2) と margin- を設定します。左の値を (幅/2) にします

HTML

< div class ="item" >

CSS

div {

高さ: 250px ;

背景: #222 ;
カラー: #fff;
/* 以下はセンタリングコードです */
位置: 絶対;
マージンtop: -125px;
margin- left: -75px;




6. 水平および垂直のセンタリング: 要素の高さと幅が不明な場合の解決策


センタリングの種類: 水平および垂直のセンタリング (幅が指定されている場合)要素の高さと要素の高さは不明です)

解決策: 要素を絶対位置に設定し、CSS3 変換属性を使用します

HTML

< div class ="item" > Lorem ipsum dolor sitamet, consectetur adipisicing elit . キューピディテート ノストラム クエラット デビットス水平方向と垂直方向の中央揃え: フレックス レイアウトを使用して実現します

解決策: フレックス レイアウトを設定し、中央に配置された要素の親要素の justify-content 属性と align-items 属性を center

HTML

< div クラスに設定します。 ="親" > < div クラス ="item" >

CSS

高さ: 100px;

背景: # 222; }

/* 以下は中央揃えのコードです*/

.parent {

justify-content: center;

align-items: center;
/* 高さを設定する必要があります垂直方向のセンタリング効果を参照*/
背景: #ccc;
高さ: 300px;