楽天アフィの検索窓(form)の左右中央化

2012/02/19 13:53

このQ&Aのポイント

ホームページ製作中に楽天ブックスの検索窓を設置する際、CSSでの左右中央化ができない問題に直面しています。
既存のCSSの指定方法や<center>タグではうまく機能しなかった上、新たなCSSファイルを作成しても解決しませんでした。
左右中央化を行いたいフォームのクラスには.margin-left:auto;と.margin-right:auto;を指定し、text-align:center;も追加しましたが効果がありませんでした。

nickname_1973
お礼率85% (106/124)

CSS
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/19 18:00 回答No.1

formはブロック要素ではありません。 <center>はブロック要素内のinline要素に対するもので、しかも非推奨です。 <table>はブロック要素です。　これら、中央に配置されない原因以外にもたくさんの間違いがあります。　　属性値はascii文字以外は""で囲む　　formはbody直下に置けない　　inputはinline要素なのでblock内に置かなければならない　　tableの多くの属性は非推奨です。　　デザインのためにtableを使うべきでない　　 ★タブは＿に置換してあります。 ★URL中の:全角の：に置換してあります。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^いずれも戻して。 ★HTML4.01strict/CSS2.1で検証ずみ　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div id="rakuten"> ＿＿<form method=get action="http：//pt.afl.rakuten.co.jp/c/"> ＿＿＿<p> ＿＿＿＿<input type=hidden name=sv value=6> ＿＿＿＿<input type="hidden" name="sid" value="213310"> ＿＿＿＿<input type="hidden" name="su" value="rakutenbooks"> ＿＿＿＿<input type="hidden" name="sn" value="楽天ブックス"> ＿＿＿＿<input type="hidden" name="cord" value="s"> ＿＿＿＿<input type="hidden" name="scid" value="af_ich_link_search"> ＿＿＿</p> ＿＿＿<h2>楽天ブックスで探す</h2> ＿＿＿<ul> ＿＿＿＿<li><input type="text" size="14" name="sitem" value="" tabindex="1" accesskey="N"></li> ＿＿＿＿<li><input type="submit" value="商品検索" name="submit" tabindex="2" accesskey="S"></li> ＿＿＿＿<li><img src="https：//image.books.rakuten.co.jp/books/img/bookimg/_h1529_bookslogo.gif" width="145" height="27" alt="楽天ブックス"></li> ＿＿＿</ul> ＿＿</form> ＿</div> </body> </html>

質問者

お礼 2012/02/19 21:53

ORUKA1951さん、ありがとうございます。実は私の質問で書いたHTMLは楽天が吐き出したものなのです。だからそのまま使えるんじゃないのかな？なんて思っていました。これからORUKA1951さんのご回答、じっくりかみ砕いていきたいと思います。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/19 21:10 回答No.2

こちらは、配布のHTMLをそのまま使う方法。もちろんお勧めじゃない。原理を理解するために・・・ <div id="rakuten"> 　<table>・・・以下略　</table> </div> にて、 #rakuten{ width:100%;: text-align:center;/* for IE6 */ } #rakuten table{ width:150px; margin: 0 auto; }

ログインすると、全ての回答が全文表示されます。