簡単なログイン画面を作成しようと思ったのですが、ブラウザ間での見え方の差異で困っています。
初心者のような質問で申し訳ないですが、分かる方がいましたらご教授お願いします。
~やりたいこと~
HTMLをいじらずにすべてを中央ぞろえにしたい。
検証するブラウザはchrome,firefox,edge,ie11です。
~起きている問題~
legendタグのログインという文字が中央にいってくれない。
~試したこと~
1、fieldsetタグにtext-align:center;を入れたのですが、chrome以外はlegendが中央にいってくれない。
2、legendをブロック要素にしてmargin: 0 auto;を入れてみた結果、edgeだけ中央にいってくれました。がfirefox,ie11では動かない。
html
1<div id="wpmem_login"><a name="login"></a> 2 <form action="http://026.test55.net/gwp/login/" method="POST" id="" class="form"> 3 <fieldset> 4 <legend>ログイン</legend> 5 <label for="log">ユーザー名</label> 6 <div class="div_text"> 7 <input name="log" type="text" id="log" value="" class="username" /> 8 </div> 9 <label for="pwd">パスワード</label> 10 <div class="div_text"> 11 <input name="pwd" type="password" id="pwd" class="password" /> 12 </div> 13 <input name="redirect_to" type="hidden" value="http://026.test55.net/gwp/login/" /> 14 <input name="a" type="hidden" value="login" /> 15 <div class="button_div"> 16 <input name="rememberme" type="checkbox" id="rememberme" value="forever" /> 17 18 <label for="rememberme">ログイン状態を保存する</label> 19 20 <input type="submit" name="Submit" value="ログイン" class="buttons" /> 21 </div> 22 </fieldset> 23 </form> 24</div>
css
1fieldset { 2 max-width: 250px; 3 width: 80%; 4 margin: 0 auto; 5 padding: 30px; 6 text-align: center; 7} 8fieldset legend{ 9 display: block; 10 width: auto; 11 margin: 0 auto; 12}
回答4件
あなたの回答
tips
プレビュー