ホームページ  >  記事  >  ウェブフロントエンド  >  画面を中央に配置するためのいくつかの方法 (DIV/CSS) (転送)_html/css_WEB-ITnose

画面を中央に配置するためのいくつかの方法 (DIV/CSS) (転送)_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:29:131040ブラウズ

1.利用table特性,在width and height all set 100%的时候,可以把容器嵌套在td内形成绝对居中,此时的被嵌套容器可为绝对或者相对大小。(非标准)注意不能加声明!
  如是在标准模式下要加样式body,html{height:100%;padding:0;margin:0;}












  2.利用负边距方法,绝对定位使容器相对屏幕绝对居中,此时的被嵌套容器只能为绝对大小。(标准)根据margin负值和top left的比例控制,实现随屏幕绝对居中,容器大小改变需要重新调整margin top left的参数:


  3.老外给出的另类方法, 巧妙利用display:inline-block;IE6.0测试通过。(标准)
  注意1.height:100%是关键:2.edge与container没有嵌套关系:
  这应该算是IE的一个bug,个人对display:inline-block理解有限。edge可以看作一个填充,container现在是一个上下居中的对象,加了背景色能看的更清楚,当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素,在内部添加块级元素是不标准的逻辑。
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



无标题文档





仅IE6.0环境下实现




   4.CSS行为expression_r_r控制实现,不过expression_r_r为IE独有,并且耗资源严重,尤其在大量使用的时候。(标准)
注意关键定义,不要以为height:100%在IE内是没用的:
  实时获取屏幕高宽值,分别减去容器高宽值再除以2,得到准确坐标绝对定位:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
无标题文档





   5.FF1.5测试通过,绝对定位,边距为比例,此时容器高宽始终为viewport的50%相对大小(标准):
FF1.5测试通过

6.FF1.5 はテストに合格しました。絶対配置、上下左右の直接配置、エッジを強制的にコンテナの相対サイズに合わせます (標準):
コード: わずか
7.ff1.5 IE5 IE6 はテストに合格しました




有効な CSS での垂直方向の中央揃え



''''inner'''''''''''',1)">デフォルトの長さ ; 長くなったページ


1. Illustrator を開き、インポートする画像より大きい四角形を描き、それを白で塗りつぶします。
2. 長方形を選択し、メニューから [効果] > [変形と変形] > [ジグザグ] を次のように設定します。
3. メニュー: [エフェクト] > [ドロップシャドウ] を次のように設定します。

1. イラストレーターを開き、新しいファイルを作成し、インポートする画像よりも大きい長方形を描き、それを白で塗りつぶします。
2. 長方形を選択し、メニューから [効果] > [変形と変形] > [ジグザグ] を次のように設定します。
3. メニュー: [エフェクト] > [ドロップシャドウ] を次のように設定します。


;/a> このデモは クリエイティブ コモンズ ライセンス- に基づいてライセンスされています。 - 帰属および非営利使用。
       







8.expression_r_r(仅对IE) を利用する

9.

< /頭>
<分割>






#a{font-size:18px;font-family:华文行楷;color:シアン;フィルター:ドロップシャドウ(offx=2,offy=2,direction=135,color=#001199);width:200;}
# b{font-size:32px;font-family:隶书;color:#09fa09;filter:shadow(direction=135,color=green,strength=3);width:899;}

居中


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:図解 div+css 命名ルール_html/css_WEB-ITnose次の記事:図解 div+css 命名ルール_html/css_WEB-ITnose

関連記事

続きを見る