text-align: ***; margin-***: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

text-align は水平方向の揃え方を、margin-*** は上下左右のマージンを指定するプロパティです。これらのプロパティをhr要素に対して設定すると、水平線の表示位置（左寄せ、右寄せ）を指定することができます。

指定方法はブラウザにより異なります。Firefoxなどでは、左または右のマージンを0にすることで表示位置を指定できますが、IEなどでは text-align プロパティで指定する必要があります。どちらにも適用させたい場合は、この2つを同時に指定しておきます。

  • 表示位置を指定する場合は、同時に水平線のサイズを指定しておく必要があります。（長さの初期値が100%なので）

hr {
width: 50%;
text-align: right;
margin-right: 0;
}
プロパティ名 値 説明
text-align left 左側に表示 IE O
right 右側に表示 IE O
margin-left 0 左側に表示 Fx Sf Cr
margin-right 0 右側に表示 Fx Sf Cr

何も指定しない場合はセンターに表示されます。

  • IE 8では、右寄せ（right）を指定すると左寄せになってしまうようです。（バグ？）

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

hr {
width: 60%;
margin-bottom: 15px;
}

hr.example1 {
margin-left: 0;
text-align: left;
}
hr.example2 {
margin-right: 0;
text-align: right;
}

</style>

</head>
<body>

<hr class="example1">

<hr class="example2">

</body>
</html>
表示例