【HTML・CSS】インライン要素に固定幅を与える

【HTML・CSS】インライン要素に固定幅を与える

特に Firefox 2 が・・・・

タイトルに使います

<STYLE type="text/css">
.fixinline {
	display:-moz-inline-box;
	-moz-box-align: center;
	display: inline-block;
	vertical-align: middle;
}
.ttl {
	border-style: solid;
	border-color: black;
	border-width: 1px;
	height: 27px;
	line-height: 27px;
	padding-left: 5px;
	background-color: silver;
}

</STYLE>
<IMG src="http://winofsql.jp/image/d.png" style='margin-right:5px;'><b 
	class="fixinline ttl" style='width:400px;'
>タイトルに使います</b>

IE6 では、デフォルトでインライン要素に幅を指定できますが、Opera は、display: inline-block が必要になります。
しかし、Firefox 2 では、inline-block が使え無いので、独自拡張の display:-moz-inline-box で実装します。
display:-moz-inline-block という拡張があるのですが、これではブロック要素として改行してしまいます。
さらに、そのままではテキストの配置が中央にならないので、-moz-box-align: center を使用しています。
vertical-align も Firefox 用で、行に対する位置合わせが中央にならないので指定しています。

※ IE と Opera では、テキストの縦位置のセンタリングは、line-height を高さに合わせる事で実装しています

参考 : Mozilla Extensions - Mozilla Developer Center

home create:2008/08/21 update:2009/09/18 InfoBoard Version 1.00 (Perl).