ホームページ > 記事 > ウェブフロントエンド > CSS Web ページ レイアウト入門チュートリアル 3: 固定幅の 1 列と Centered_Basic チュートリアル
CSS Web ページ レイアウト入門チュートリアル 3: 固定幅の 1 列と Centered_Basic チュートリアル
- PHP中文网オリジナル
- 2016-05-16 12:07:201827ブラウズ
css web ページ レイアウト入門チュートリアル 3: 固定幅の 1 列を中央揃え_基本チュートリアル
ページ全体の中央揃えは、web デザインで最も一般的に使用される形式です。テーブル レイアウト。これを実現するために、テーブルの align="center" 属性を使用します。 p 自体も align="center" 属性をサポートしており、p を中央に表示することもできます。ただし、css レイアウトはパフォーマンスとコンテンツの分離を実現するためのものであり、align 属性は xhtml の p 属性に記述されるスタイル コードです。これは共有の原則に反するため (分離することで web サイトが管理しやすくなります)、css を使用してコンテンツを中央揃えにする必要があります。例として固定幅の列レイアウト コードを取り上げ、それに中央揃えの css スタイルを追加してみましょう:
コードは次のとおりです。
#layout {
border: 2px solid #a9c9e2;
background-color: #e8f5fe;
height: 200px;
width: 300px;
margin:0px auto;
}
margin 属性は、上部の外側のマージンを制御するために使用されます。オブジェクトの右、下、左の方向。マージンが 2 つのパラメータを使用する場合、最初のパラメータは上下のマージンを表し、2 番目のパラメータは左右のマージンを表します。数値を直接使用することに加えて、マージンは auto と呼ばれる値をサポートしていません。auto 値を使用すると、ブラウザがマージンを自動的に決定できます。ここでは、現在の p の左右のマージンを auto に設定します。ブラウザは設定します。 p の左右の余白を等しく設定し、中央に表示することで中盤効果を実現しています。
注: この中央揃えの方法は、ie6 より前のブラウザではサポートされていません。以下の css hack セクションで解決策を詳しく説明します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
操作手順は固定幅の列と同じですが、cssの枠線設定項目で上下左右を設定する点が異なります。境界線をそれぞれ 0、auto、0、auto に設定します。
上記は、css web ページ レイアウト入門チュートリアル 3: 固定幅の 1 列 center_basic チュートリアルの内容です。その他の関連コンテンツについては、こちらをご覧ください。 php 中国語 web サイト (www.php.cn)!