※ ChatGPTを利用し、要約された質問です（原文：ｃｓｓで見出しの両側に文字を表示したい）
このQ&Aのポイント
ＣＳＳ+ＨＴＭＬでWebページを作成しています。その中で見出し(H3タグ)の両側に、右寄せ左寄せで文字を表示したいのです。
ソース全文載せましたが、見出しの下に右寄せと左寄せの文字が、表示されてしまいます。見出しの両側に表示させるにはどうしたらよいですか？
ＣＳＳのdiv.heading h3クラスにtext-alignプロパティを追加し、centerに設定することで、見出しのテキストを中央に配置できます。
ｃｓｓ+ｈｔｍｌでWebページを作成しています。
その中で見出し(H3タグ)の両側に、右寄せ左寄せで文字を表示したいのです。
（完成イメージは画像参照）。
ソース全文載せましたが、見出しの下に右寄せと左寄せの文字が、表示されてしまいます。
見出しの両側に表示させるにはどうしたらよいですか？
よろしくお願いいたします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<STYLE TYPE="TEXT/CSS">
<!--
div.heading {
width: 450px;
background-color: #e0e0e0;
border: #e0e0c0 solid;
border-width: 1px 1px 2px;
margin-left: auto;
margin-right: auto;
}
/* --- 見出し --- */
div.heading h3 {
margin: 0;
padding: 7px 7px 4px;
border-bottom: 4px #9825e1 solid;
font-size: 100%;
line-height: 100%;
text-align: center;
}
span {
float: left;
width: 100px;
text-align: center;
}
span.back {
float: left;
}
span.next {
float: right;
}
}-->
</STYLE>
</head>
<body>
<!--全体(wrapper) Start-->
<div class="all-wrapper">
<div class="main-wrapper">
<div class="heading">
<h3>見出し</h3>
<span class="back"><a href="#">BACK</a></span><span class="next"><a href="#">NEXT<aa></span>
</div>
</div>
</div>
</body>
</html>
お礼
IE6・7に関してはIE6・7のスターハックで自己解決しました html*span { margin-top: -22px; } 大変ありがとうございました。
補足
回答ありがとうございます。 FireFox、Opera、Safari、Chromeでは動作確認できました。 IEではうまく表示できませんでした。 アドバイスをお願いいたします。