CSS 水平揃え

CSSの水平配置（水平配置）

ブロック要素の配置

ブロック要素は、前後に改行が入った全幅を占める要素です。

ブロック要素の例:

<h1>

<p>

<div>

この章では、レイアウトでブロック要素を水平方向に整列させる方法を説明します。

中央揃えでは、margin 属性

block 要素を使用して、左右のマージンを「自動」配置に設定できます。

注: IE8 での margin:auto 属性の使用は、!DOCTYPE を宣言しない限り正しく機能しません

margin 属性は、自動的に指定されるように左と右のマージン設定に任意に分割でき、結果は中央揃えの要素になります。

例

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

ヒント: 幅が 100% の場合、位置合わせは効果がありません。

注: IE5 にはブロック要素のマージン処理のバグがあります。上記の例を IE5 で動作させるには、いくつかのコードを追加する必要があります。

クロスブラウザ互換性の問題

<pこのように要素を配置する場合、要素のマージンとパディングを事前に決定することをお勧めします。これは、ブラウザーごとに視覚的な違いが生じるのを避けるためです。

IE8 以前では、position 属性を使用するときに問題があります。コンテナ要素 (この場合は <div class="container">) に指定された幅があり、!DOCTYPE 宣言が欠落している場合、IE8 以前のバージョンでは右側に 17 ピクセルのマージンが追加されます。これはスクロール用の予約スペースのようです。 Position 属性を使用する場合は、必ず DOCTYPE 宣言で設定してください。

左右の配置を設定するには float 属性を使用します

float 属性の使用は、要素を配置する方法の 1 つです:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>凡是到达了的地方，都属于昨天。哪怕那山再青，那水再秀，那风再温柔。带深的流连便成了一种羁绊，绊住的不仅是双脚，还有未来。</p>
<p>怎麽能不喜欢出发呢？没见过大山的巍峨，真是遗憾；见了大山的巍峨没见过大海的浩翰，仍然是遗憾；
见了大海的浩翰没见过大漠的广袤，依旧遗憾；见了大漠的广袤没见过森林的神秘，还是遗憾。世界上有不绝的风景，我有不老的心情。</p>
</div>
</body>
</html>

クロスブラウザ互換性の問題

このように要素を配置する場合、要素のマージンとパディングを事前に決定します要素、常に良いアイデアです。これは、ブラウザーごとに視覚的な違いが生じるのを避けるためです。

IE8 以前では、float 属性を使用するときに問題があります。コンテナ要素 (この場合は <div class="container">) に指定された幅があり、!DOCTYPE 宣言が欠落している場合、IE8 以前のバージョンでは右側に 17 ピクセルのマージンが追加されます。これはスクロール用の予約スペースのようです。 float 属性を使用する場合は、必ず DOCTYPE 宣言で設定してください。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括!DOCTYPE声明!如果丢失,它将会在IE浏览器产生奇怪的结果。</p>
</div>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head> <body> <div class="center"> <p>突然开始怀念花开。粉色的樱，蓝色的龙胆，堇色的熏衣草，由近而远，延伸向远方天空的尽头。</p> <p>爱你现在的时光。过去的已经过去了，较什么劲呢？未来的还没有来，焦虑什么呢？你知道什么是真正的恐惧吗？</p> </div> <p><b>Note: </b>短篇小说</p> </body> </html>

提出するリセットコード

自動運転