align-items: center;が効きません

align-items: center;が効きません。
footer-text-areaというコンテナに対して、
display: flex;
justify-content: space-between;
align-items: center;
を指定し、アイテムを上下中央、左右は間隔を開けて配置するつもりです。
ですが、上下中央配置が適用されておらず原因が掴めないので、添削をおねがいたします。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
	
<!--headerエリア-->
<header class="header">
	
	<div class="header-logo">
		<a href="#">
			<img src="maruni-image/head_logo@2x.png" alt="テキスト" class="header-logo-size">
		</a>
	</div>
	
	<nav class="header-text">
		<ul class="nav-list">
			<li class="text-item">
				<a href="#">マルニの取り組み</a>
			</li>

			<li class="text-item">
				<a href="#">事業内容</a> 
			</li>

			<li class="text-item">
				<a href="#">事例紹介</a>
			</li>
		</ul>
	</nav>
	
</header>
<!--headerエリア-->
	
<!--main-visualエリア-->
<section class="mainvisual-area">
	
	<div class="main-flex display-flex">
		<div class="flex-item-a">
			<img src="maruni-image/mainimage-pc@2x.jpg" alt="メインビジュアル">
		</div>
		
		<div class="flex-item-b">
			<p class="main-text-a">テキス</p>
			<p class="main-text-b">テキスト</p>
			
			<p class="button-type-a">テキスト</p>
			<i class="fas fa-long-arrow-alt-right right-icon"></i>
		</div>
	</div>

	<p class="main-info">INFORMATION</p>
</section>
<!--main-visualエリア-->	
	

<!--Total Exterior Planningエリア-->
<section class="Total-Exterior-Planning-area">
	
	<div class="text-tac">
		<p class="midashi-text">Total Exterior Planning</p>
		<p class="TEP-maint-text-b">テキスト<br>
		テキスト</p>
		<p class="button-type-a">テキスト</p>
	</div>
	
	
	<div class="TEP-image-area display-flex">
		<div class="image-list">
			<img src="maruni-image/service1@2x.jpg" alt="指を指している画像">
			<p class="TEP-text-a">Exterior</p>
			<p class="TEP-text-b">テキスト</p>
		</div>
		
		<div class="image-list">
			<img src="maruni-image/service2@2x.jpg" alt="家の画像">
			<p class="TEP-text-a">Land Usage</p>
			<p class="TEP-text-b">テキスト</p>
		</div>
		
		<div class="image-list">
			<img src="maruni-image/service3@2x.jpg" alt="測量する人の画像">
			<p class="TEP-text-a">Surveying and Design</p>
			<p class="TEP-text-b">テキスト</p>
		</div>
		
		<div class="image-list">
			<img src="maruni-image/service4@2x.jpg" alt="資材の画像">
			<p class="TEP-text-a">Material Sales</p>
			<p class="TEP-text-b">資材販売</p>
		</div>
	</div>
	
</section>
<!--Total Exterior Planningエリア-->	
	
	
<!--worksエリア-->
<section class="works-area">
	
	<div class="works-text">
		<p class="midashi-text white-text">Works</p>
		<p class="button-type-b">テキスト</p>
	</div>
	
	<div class="works-home-area display-flex">
			<div class="image-block">
				<img src="maruni-image/1575102187.jpg" alt="夜の家の画像" class="works-image">
			</div>
			
			<div>
				<p>テキスト</p>
				<p class="button-type-a">事例紹介</p>
			</div>
	</div>
	
</section>
<!--worksエリア-->	
	
	
<!--Topicsエリア-->
<section class="topics-area">
	
	<div class="topics-text-area">
		<p class="midashi-text">Topics</p>
		<p class="button-type-a">トピックス一覧</p>
	</div>
	
	<div class="topics-contena display-flex">
		<p class="oyakudati-info">お役立ち情報</p>
		<p class="day">2020.4.10</p>
		<p class="topics-text">テキスト</p>
	</div>
	
	<div class="topics-contena display-flex">
		<p class="oyakudati-info">お役立ち情報</p>
		<p class="day">2020.3.26</p>
		<p class="topics-text">テキスト</p>
	</div>
	
	<div class="topics-contena display-flex">
		<p class="oyakudati-info">お役立ち情報</p>
		<p class="day">2020.3.7</p>
		<p class="topics-text">テキスト</p>
	</div>
	
	<div class="topics-contena display-flex">
		<p class="oyakudati-info">お役立ち情報</p>
		<p class="day">2020.2.18</p>
		<p class="topics-text">テキスト</p>
	</div>
	
	<div class="topics-contena display-flex">
		<p class="oyakudati-info">お役立ち情報</p>
		<p class="day">2020.1.10</p>
		<p class="topics-text">テキスト</p>
	</div>
	
</section>
<!--/Topicsエリア-->
	
<!--会社概要エリア-->
<section class="conpany-info-area">
	<div>
		<a href="#">
			<img src="maruni-image/foot_logo@2x.png" alt="フッターのロゴ" class="footer-logo-size">
		</a>
	</div>
	
	<div>
		<p class="conpany-text">テキスト</p>

		<div class="conpany-info-link">
			<a href="#" class="slash">会社概要 </a>
			<a href="#" class="slash">プライバシーポリシー</a>
			<a href="#">採用情報</a>
			<a href="#" class="slash">資料請求</a>
			<a href="#">お問合せ</a>
		</div>
	</div>
	
	<div>
		<div class="conpany-block">
			<p class="conpany-block-text-a">新築をお考えの方へ</p>
			<p class="conpany-block-text-b">家を建てる前に知りたいエクステリアのこと。</p>
			<i class="fas fa-long-arrow-alt-right right-icon"></i>
		</div>

		<div class="conpany-block">
			<p class="conpany-block-text-a">住宅会社の方へ</p>
			<p class="conpany-block-text-b">共に地域ブランディングに取り組みませんか。</p>
			<i class="fas fa-long-arrow-alt-right right-icon"></i>
		</div>
	</div>
</section>	
<!--/会社概要エリア-->
	
<!--footerエリア-->
<footer class="footer-area">	
	
	<div class="footer-text-area">
		
		<div class="footer-text-a-area white-text">
			<p class="footer-text-a">株式会社テキスト</p>
			<p class="footer-text-a">テキストテキスト</p>
			<p class="footer-text-a">テキスト<p>
			<p class="footer-text-a">テキスト</p>
		</div>	
	
		<div class="footer-text-b-area white-text">
			<p class="footer-text-b">©️MARUNI 1969-2020<br>
			Web Produced By tobikikaku</p>
		</div>
		
	</div>
</footer>
<!--footerエリア-->

<!--ページトップボタン-->
<p class="pagetop-btn">
	<a href="#"><img src="maruni-image/pagetop@2x.png" alt="トップボタン"></a>
</p>
<!--ページトップボタン-->	
</body>
</html>

コード

@charset "UTF-8";
/* CSS Document */

html{
	font-size:62.5%
}

body{
	font-size:1.6rem;
	font-family: "YuGothic", "Yu Gothic medium", "Hiragino Sans", "Meiryo", "sans-serif";
	color:#333;
}
img{
 	max-width:100%;
	height:auto;
}
a{
	text-decoration: none;
	color:#333;
}
.display-flex{
	display: flex;
}
.white-text{
	color:#fff;
}

.button-type-a{

}


/*headerエリア*/


/*/headerエリア*/


/*main-visualエリア*/

.flex-item-b{
	max-width: 170px;
	margin-right: 35px;
	margin-left: 35px;
}
.main-text-a{
	writing-mode:vertical-rl;
	font-size:2.6rem;
	font-weight: 300;
	line-height: 1.5;
}
.main-info{
	padding-left: 30px;
	padding-top: 35px;
	padding-bottom: 35px;
}

/*/main-visualエリア*/

/*Total-Exterior-Planningエリア*/
.Total-Exterior-Planning-area{
	background-color: #f0f0f0;
	padding: 70px 10px 100px;
}
	.text-tac{
		text-align: center;
	}
	.midashi-text{
		margin-bottom: 30px;
		font-family: "futura-pt", "sans-serif";
		font-family: 2.6rem;
		font-weight: 500;

	}
	.TEP-maint-text-b{
		font-size:1.4rem;
		line-height: 26px;
		font-weight: 500;
		margin-bottom: 40px;
	}


.TEP-image-area{
	margin-top: 65px;
}
	.image-list{
		margin-right: 25px;
		background-color: #fff;
		padding: 15px 15px 15px;
	}

	.image-list:last-of-type{
		margin-right: 0;
	}
	
		.TEP-text-a{
			margin-top: 10px;
			font-size:1.4rem;
			font-weight: 500;
		}

		.TEP-text-b{
			margin-top: 10px;
			font-size:1.4rem;
			font-weight: 400;
		}
/*/Total-Exterior-Planningエリア*/


/*worksエリア*/
.works-area{
	background-color: #6F8D83;;
	padding-top: 70px;
	padding-bottom: 100px;
	box-sizing: border-box;
	
}
.works-text{
	text-align: center;
}
.works-home-area{
	background-color: #fff;
	margin-left: 30px;
	margin-right: 30px;
	padding: 15px 15px 15px;
}
.image-block{
	width: auto;
}
.works-image{
	width: 100%;
}
/*/worksエリア*/

/*topicエリア*/

.topics-area{
	background-color: #f0f0f0;
	padding-top: 70px;
	padding-bottom: 100px;
	text-align: center;
}	

	.topics-text-area{
		margin-bottom: 30px;
	}
	.topics-contena{
		background-color: #FAB8B8;
		justify-content: center;
		padding-top: 30px;
		padding-bottom: 30px;
		border-top:solid 1px #333;

	}
	.topics-contena:last-of-type{
		border-bottom: solid 1px #333;
	}

		.oyakudati-info{
			margin-right: 40px;
			background-color: #333;
			color:#fff;
			font-size:1.1rem;
			line-height: 11px;
			font-weight: 500;
			border-radius: 2em;
			padding: 3px 8px 3px;
		}
		.day{
			font-size: 1.4rem;
			font-weight: 500;
			margin-right: 40px;
		}
/*/topicエリア*/

/*会社概要エリア*/
.conpany-info-area{
	padding: 90px 20px 100px;
}
.footer-logo-size{
	width: 10%;
}
.conpany-text{
	font-size:1.4rem;
	line-height: 25px;
	font-weight: 500;
	
}
.conpany-info-link{
	font-size:1.2rem;
	font-weight: 700;
	line-height: 1.5;
	width: 300px;
}

.slash::after{
	content: "/";
	margin-left: 15px;
	margin-right: 15px;
}
.conpany-block{
	padding: 20px 20px 20px;
	border:solid 1px #333;
	margin-bottom: 10px;
	position:relative;
	width: 35%;
}
.conpany-block:last-of-type{
	margin-bottom: 0;
}
	.conpany-block-text-a{
		font-size: 1.4rem;
		font-weight: 700;
		margin-bottom: 10px;
	}
	.conpany-block-text-b{
		font-weight: 500;
		font-size:1.2rem;
	}
.right-icon{
	position: absolute;
	top:50%;
	right:20px;
	transform: translate3d(-50%,-50%,0);
}
/*/会社概要エリア*/

/*footerエリア*/
.footer-area{
	max-width: 1200px;
	height: 90px;
	padding-right: 30px;
	padding-left: 30px;
	background-color: #333
}

.footer-text-area{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer-text-a-area{
	display: flex;
}
.footer-text-a{
	font-size:1.2rem;
	font-weight: 500;
	margin-right: 10px;
}
.footer-text-b{
	text-align: center;
	font-size:1.2rem;
	font-weight: 500;
}
/*footerエリア*/
/*pagetopボタン*/
.pagetop-btn{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 10px;
	bottom:0;
}
/*pagetopボタン*/
コード

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

回答1件

ベストアンサー

Codepenでサンプルを作成して確認してみましたが、アイテムは上下中央配置されていると思いますが、どの辺が想定と異なりますか。

Codepenサンプル

全コードが提示されたので

原因は、
.footer-area に height: 90px; が設定されているのに、
.footer-text-area には高さが設定されていず中身の高さに依存している点ですね。
そのため、.footer-text-areaの高さは90px以下になりその分上にずれてます。

解決法は、.footer-text-areaの高さを90pxに設定すればOKです。

css
1.footer-area{
2    max-width: 1200px;
3 /*   height: 90px; 不要 */
4    padding-right: 30px;
5    padding-left: 30px;
6    background-color: #333
7}
8
9.footer-text-area{
10    height: 90px; /*挿入*/
11    display: flex;
12    justify-content: space-between;
13    align-items: center;
14}

このように想定通りのレイアウトにならない場合は、ブラウザの検証ツールを使うと簡単に原因が分かります。今回もコードをCoepenにコピーして検証ツールですぐに分かりました。

検証ツールの使い方は下記などを参考にしてください。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

投稿2020/05/04 04:51

編集2020/05/04 07:29

hatena19

総合スコア33699

退会済みユーザー

2020/05/04 05:03

あれ、、、そうですか。footer-text-areaというアイテムの親であるコンテナボックスの中での上下中央をしたいのですが、プレビューを確認しても添付した画像のように、テキストが上よりになっている状況です。。

退会済みユーザー

2020/05/04 05:07

そう。まさにhatena19様がCodepenに書かれている通りのレイアウトを望んでいます。同じコードなのに、なぜ適用されないのでしょうか。

hatena19

2020/05/04 05:12

サンプルは提示のコードをコピーしただけのものです（背景色は見やすいように変更しましたが）。呈示されているコード以外の部分に問題があるのでしょう。margin とか padding とか設定してませんか。あるいは、ブラウザ既定の余白などが効いているかもしれません。 * {margin: 0; padding: 0; } を追加してみるとか、リセットCSSを適用してみるとか、するとどうなりますか。