前提

まだウェブサイト作成を学習している初心者です。

画像の説明をここに入力

おおよそ添付画像のようなログイン画面を作成したいと思っています。

発生している問題・エラーメッセージ

発生している問題 1

ページのタイトルを記述するだけの「トピック」部分の CSS ですが、"ログイン"という文字が垂直方向の中央に配置されません。

display: inline; にするとテキスト部分のみに背景色が適用されます。display: inline-block; にしてもテキストの垂直方向に動いてくれません。
念のため block をいれてみたのですが変わりません。

ちなみにページの幅、 width は 1000px です。

<div id="topic"> の部分に記述した文字列を垂直方向中央にするにはどのような CSS を記述したり、 HTML の方に何か加えるなりしたらよろしいでしょうか？

発生している問題 2

添付画像にもありますが、上から 4 行目のロゴ 2 の横にユーザー ID とパスワードのフォームを配置し、さらにログイン画面をフォームの横に設置しようとしています。

で幅を設定し form や fieldset に float: right; をかけてみたのですがユーザー ID やパスワードのボックスがうまくロゴ 2 の横にならんでくれません。フッター部分の右下に配置されたりします。

おおよそ URL 画像のようにロゴ 2 の画像の横に２つのフォームを縦に並べ、その横にログインボタンを配置し、メイン画像の縦横中央にこれらを配置するにはどのような CSS を記述すればいいでしょうか？

独学で学習していたのですが、やはり自分で作ってみようとすると中々うまくいきません。

ご面倒でしょうが何卒よろしくお願いします。m(_ _)m

該当のソースコード

<!--↓main contents↓-->
<main>
    <div id="topic">ログイン</div>
    <p><img src="img/common/logo2.jpg" alt="ロゴ2"></p>
    <!--↓form↓-->
    <form action="#">
        <fieldset>
            <p><input type="text" name="userid" pattern="^[0-9A-Za-z]+$" value="" placeholder="ユーザーID"></p>
            <p><input type="password" name="password" pattern="^[0-9A-Za- 
z]+$" value="" placeholder="パスワード"></p>
            <p><input type="submit" value="ログイン"></p>
        </fieldset>
    </form>
    <!--↑form↑-->
</main>
<!--↑main contents↑-->

#topic {
    height: 30px;
    background-color: #819FF7;
    vertical-align: middle;
}