css center_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css center_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:23:57

オリジナル

792 人が閲覧しました

1. margin を atuo に設定します

margin: 1 つのステートメントですべての margin 属性を設定する短縮属性。このプロパティには 1 ～ 4 の値を指定できます。

具体的には、中央揃えする要素の margin-left と margin-right を auto に設定します。このメソッドは水平方向の中央揃えのみを実行できます ので、浮動要素や絶対配置要素 には無効です。

<!DOCTYPE html><html><head>   <title>margin 居中</title>   <meta charset="utf-8"><style type="text/css">#test{   width:50px;   height: 50px;   background-color: blue;   margin: auto;}</style></head><body><div id="test"></div></body></html>

ログイン後にコピー

Result:

2. text-aligncentered

text-align 属性は、要素内の テキストを指定します (画像、ボタン、テキストなどのインライン要素にのみ使用できます)表示はインラインまたはインラインブロックなど)) 水平配置です。

この属性は、ラインボックスが整列する点を指定することによって、ブロックレベル要素内のテキストの水平方向の整列を設定します。値 justify は、ユーザーエージェントが行コンテンツ内の文字と単語の間の間隔を調整できるようにすることでサポートされており、ユーザーエージェントによって異なる結果が得られる可能性があります。

<!DOCTYPE html><html><head>   <title>margin 居中</title>   <meta charset="utf-8"><style type="text/css">#test{   text-align: center}div{    width: 100px;    background-color: rgb(12,110,221);    margin-bottom: 20px;}</style></head><body><div id="test">    测试</div><div >    测试</div></body></html>

ログイン後にコピー

結果は次のとおりです:

分析 : テスト 1 の div に text-align: center 属性が追加されたため、テキストが中央揃えになり、テスト 2 が配置される div が配置されます。 text-align: center は追加されないため、デフォルトは左になります。ただし、ここでは div 内のテキストが中央に配置されているだけです。

3. 絶対配置を使用して中央揃えにする（水平方向と垂直方向の中央揃え）

この方法は、幅と高さがすでにわかっている要素にのみ適用されます。

原則：絶対配置要素の left 属性または top 属性を 50% に設定すると、この時点では要素は中央に配置されず、要素の幅または高さの半分の距離だけ右または左にオフセットされます。この

負のマージン値は、要素の幅または高さの半分を占めます。

<!DOCTYPE html><html><head>   <title>绝对定位 居中</title>   <meta charset="utf-8"><style type="text/css">body{    margin: 0;    padding: 0;}#test{   width:50px;   height: 50px;   background-color: blue;      position: absolute;   left : 50%;     top:50%;   margin-left: -25px;    /* 宽度的一半 */   margin-top: -25px;     /* 高度的一半 */}</style></head><body><div id="test"></div></body></html>

ログイン後にコピー

結果は以下の通りです:

4. 別の絶対配置方法 (水平方向と垂直方向のセンタリング)

高さと幅が既知の要素にのみ適用されます。

IE9+、Google、Firefox、および w3c 標準に準拠するその他の最新ブラウザのみをサポートします。

デモ:

<!DOCTYPE html><html><head>   <title>绝对定位 居中</title>   <meta charset="utf-8"><style type="text/css">body{    margin: 0;    padding: 0;}#test{   width:50px;   height: 50px;   /* 高度和宽度必须固定 */   background-color: blue;   position: absolute;   left : 0;     top:0;   right: 0;   bottom:0;   margin: auto;}</style></head><body><div id="test"></div></body></html>

ログイン後にコピー

結果は次のとおりです:

謝辞: 読んでいただきありがとうございます!