ウェブサイト作成の学習をしています。
http://or2.mobi/index.php?mode=image&file=224335.png
おおよそ上記のurlの画像のようなログイン画面を作成したいと思っています。
①ページのタイトルを記述するだけの「トピック」部分のcssですが”ログイン”
という文字が垂直方向の中央に配置されません。
display: inline; にするとテキスト部分のみに背景色が適用されます。
display: inline-block; にしてもテキストの垂直方向に動いてくれません。
念のためblockをいれてみたのですが変わりません。
ちなみにページの幅、widthは1000pxです。
＜div id="topic"＞ の部分に記述した文字列を垂直方向中央にするにはどのようなCSSを記述したり、
HTMLの方に何か加えるなりしたらよろしいでしょうか？
①
topic {
height: 30px;
background-color: #819FF7;
vertical-align: middle;
}
②URLの画像にもありますが、上から４行目のロゴ2 の横にユーザーIDとパスワードのフォームを配置し、さらにログイン画面をフォームの横に設置しようとしています。
cssで幅を設定し form や fieldset にfloat: right; をかけてみたのですがユーザーIDやパスワードのボックスがうまくロゴ２の横にならんでくれません。フッター部分の右下に配置されたりします。
おおよそurl画像のようにロゴ２の画像の横に２つのフォームを縦に並べ、その横にログインボタンを配置し、メイン画像の縦横中央にこれらを配置するにはどのようなCSSを記述すればいいでしょうか？
独学で学習していたのですが、やはり自分で作ってみようとすると中々うまくいきません。
ご面倒でしょうが何卒よろしくお願いします。m( )m
【HTML】
<!-- -->
<!--↓main contents↓-->
ログイン
<!--↓form↓-->
<!--↑form↑-->
<!--↑main contents↑-->
<!-- -->
