FIELDSETタグの見出しを真ん中に表示_技術三昧ブログ

ホーム » ブログ » FIELDSETタグの見出しを真ん中に表示

@2018/05/07

ホームページ作成する際に、html5タグのfieldsetのタイトルを真ん中にセッティングすることがありました。
chromeで正しく中央揃って表示していましたが、IEを確認したら左寄せて表示されてしまい、バランスが若干悪くなっています。
legendをCSSで調整してみましたが、どうも真ん中に表示できません！
確かにfieldsetに対して、各ブラウザの解釈は微妙にズレてます、最後はfieldsetタグを使用しなく、普通のDIVタグでfieldsetと同じレイアウトを表示することにできました。
コードは下記の通りです。コピペでご利用できます。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>技術三昧</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
body {
	font-size: 16px;
}
.FieldSetDIY {
	position: relative;
	width: 500px;
	border: solid 1px #CCC;
	height: auto;
	margin: 2rem auto;
}
.FieldSetDIY > label {
	position: absolute;
	height: 2rem;
	top: -1rem;
	left: 50%;
	display: inline-block;
}
.FieldSetDIY > label > span {
	height: 100%;
	width: 100%;
	margin-left: -50%;
	display: inline-block;
	box-sizing: border-box;
	font-size: 1.1rem;
	border: 1px solid #CCC;
	background-color: #FFF;
	padding: .5rem .2rem;
	line-height: 100%;
}

.FieldSetDIY div.FSContent {
	padding: 0.2rem;
}

</style>  
</head>

<body>

<div class="Outer">
	<div class="FieldSetDIY">
		<label><span>Fieldset見出し</span></label>
		<div class="FSContent">
			<p>adfadsfad<p>
			<p>adfadsfad<p>
			<p>adfadsfad<p>
			<p>adfadsfad<p>
			<p>adfadsfad<p>
			<p>adfadsfad<p>
		</div>
		
	</div>
</div>

</body>
</html>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/283.html

閉じる

FIELDSETタグの見出しを真ん中に表示_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！