html_HTML/Xhtml_Web ページ制作の水平方向および垂直方向の中央揃えに関連する問題の概要-htmlチュートリアル-php.cn

html_HTML/Xhtml_Web ページ制作の水平方向および垂直方向の中央揃えに関連する問題の概要

WBOY

リリース： 2016-05-16 16:36:19

オリジナル

1600 人が閲覧しました

最近、センタリングに関する多くの問題に遭遇したので、後で簡単に見つけられるように、時間をかけてここにまとめました

1. テキストを中央揃え

コードをコピー

私は真ん中です...

.. 高さ行の高さのテキスト-center（単一行のみを中央に配置できます）
.wrap{
width:px;
height:px;
border:px Solid red;
text-align: center;
line-height: px;
}

ps:text-align:center は、要素
1.2display の下のインライン要素を中央に配置するだけです。 table-cell (中央に高さが固定された複数の行)

コードをコピー

コードは次のとおりです:

.wrap{
width:px;
height:px;
border:px ソリッドレッド;
text-align: center; cell;
vertical-align: middle;
}

display:table-cell: ie67 では機能しません。display:table;
ie67: (将来的には使用されませんが、ここに入れておきます)
方法 1: (em タグの高さは、親なので、span と em を親にセンタリングすることは、スパンを親にセンタリングすることと同じです)

コードをコピーコードは次のとおりです:

私は真ん中です...私は真ん中です...私は真ん中です... 私は真ん中です...

gt;

.wrap{
width:px;
height:px;
border:px 実線赤;
text-align: center;
}
.wrap scan{
vertical-align:中央;
表示:インラインブロック;
幅:px;
}
.wrap em{
高さ:%;
垂直配置: 中央;インラインブロック;
}

方法 2: (絶対位置の親タグを子要素に追加し、子要素の相対位置を一致させて水平方向と垂直方向の中央に配置します)

コードをコピーします

コードは次のとおりです:

< ;span class="span"> ;

私は真ん中です... 私は真ん中です... 私は真ん中です... 私は真ん中です中央...

.wrap{
width:px;
height:px;
border:ピクセル赤;
表示:テーブル;
位置:相対;
オーバーフロー: 非表示;
}
.wrap .span{
表示:テーブルセル; -align: 中央;
text-align: center;
*位置: 絶対;
上:%;
左:%;
}
.wrap .span{
*位置:相対;
上:-%;
左:- %;
}

1.3padding (内部パディング、言うまでもありません)

コードをコピー

コードは次のとおりです: .wrap{

width:px;

border:px Solid red;

padding:px ;
}

2. 中央の要素

コードをコピーします

は次のとおりです:

2.1位置:絶対的な負のマージン (マージンを計算するには幅と高さが使用可能である必要があります)

コードをコピー

コードは次のとおりです:

.wrap{
width:px;
height:px;
位置:absolute;
left:%; :-px;
margin-left:-px;
ボーダー:px ソリッドレッド;
}
.wrap スパン{
width:px;
> > 背景:赤;
位置: 絶対;
上:%;
マージン-左:-px; }

ps: CSS は DIV の水平方向のセンタリングと垂直方向のセンタリングを実装します

コードをコピー

コード次のように:

> 上下垂直センタリングのオンラインデモ

#main {

位置: 絶対値: 400px; ;

左:50%;
マージン-左:-200px;
ボーダー:1px
}
/*css 注: スクリーンショットを容易にするには、CSS コードをラップします*/

main" >DIV は水平方向と垂直方向の上下に中央揃えになりますDIVCSS5

水平および垂直センタリングの原理の紹介

ここでは、左と上を使用して、上と左までのオブジェクトの距離を 50% に設定します。 50% に設定されていますが、実際にはボックスは中央揃え効果が得られないため、margin-left:-200px;margin-top:-100px; が設定されています。同時に、margin-top の値もオブジェクトの高さの半分になるため、水平方向と垂直方向のセンタリングが実現されます。