CSSで画像の下揃えに関して

現在サイト模写の為iSaraのページを模写しようとしていました。
そこでheaderにある画像の部分で躓いてしまったため質問させていただきます。

iSaraのheader-logoのimgはしっかりと文字がそろっているのですが、自分のは少しはみ出ています。
そこを直そうと自分は親要素にposition: relative;を使いimgタグに
position: absolute;としつつ、bottom: 0;としたのですが、画像の緑のpaddingの緑の部分の下に揃えられてしまい、うまくいかなくて詰まってしまいました。（自分のスクリーンショットの画像は詰まってしまったのでpositionプロパティは消した後の写真です）どなたかアドバイスお願いします。
以下、現在のコードです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>iSara[イサラ]|バンコクのノマドエンジニア育成講座</title>
6	<link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9	<header>
10		<div class="title">
11			<div class="title-container">
12				<img src="img/isaralogo.png" width="128" vertical-align="middle">
13			</div>
14		</div>
15	</header>
16</body>
17</html>

CSS
1body {
2	font-family: Verdana, sans-serif;
3	margin: 0;
4	font-size: 14px;
5}
6
7header .title {
8	height: 75px;
9}
10
11header .title-container {
12	height: 35px;
13	padding: 20px 0;
14	margin: 0 98px;
15}
16
17header .title-container {
18	position: relative;
19}
20
21header img {
22	float: left;
23}
24

yoshinavi

2019/04/13 18:39

画像（img/isaralogo.png）の高さはいくつですか？

行動規範の内容に同意します

回答2件

CSS を以下のように修正することで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

CSS
1body {
2  font-family: Verdana, sans-serif;
3  margin: 0;
4  font-size: 14px;
5}
6
7header .title {
8  height: 75px;
9}
10
11header .title-container {
12  /* height: 35px; */ /* 削除 */
13  padding: 20px 0;
14  margin: 0 98px;
15  overflow: hidden; /* 追加 */
16}
17
18header .title-container {
19  position: relative;
20}
21
22header img {
23  float: left;
24}