CSSでテキスト、画像、フォームの配置がうまくできません。

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

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

①ページのタイトルを記述するだけの「トピック」部分のcssですが”ログイン”
という文字が垂直方向の中央に配置されません。
display: inline; にするとテキスト部分のみに背景色が適用されます。
display: inline-block; にしてもテキストの垂直方向に動いてくれません。
念のためblockをいれてみたのですが変わりません。
ちなみにページの幅、widthは1000pxです。
＜div id="topic"＞の部分に記述した文字列を垂直方向中央にするにはどのようなCSSを記述したり、
HTMLの方に何か加えるなりしたらよろしいでしょうか？
①

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

②添付画像にもありますが、上から４行目のロゴ2 の横にユーザーIDとパスワードのフォームを配置し、さらにログイン画面をフォームの横に設置しようとしています。
cssで幅を設定し form や fieldset にfloat: right; をかけてみたのですがユーザーIDやパスワードのボックスがうまくロゴ２の横にならんでくれません。フッター部分の右下に配置されたりします。

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

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

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

【HTML】

<!--↓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↑-->

kei344

2019/02/17 10:42

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、書かれている状況が再現するコード（HTML/CSS）全体を提示されたほうが回答を得やすいと思います。