常連

レスポンシブサイトを作っています。（北朝鮮っぽいのはネタで作っているだけです）

下記の黄色の文字の部分を北朝鮮の国旗の縦の中央寄せにしたいのですが、うまくいきません。

よい方法はありますでしょうか？

<html>
```ここに言語を入力
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main_style.css">
<link rel="stylesheet" type="text/css" href="css/index_style.css">
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
<header>
  <nav class="clearfix"> 
    
    
    <div class="logo">
      <h1><a href="index.html"><span>株式会社DPRK</span></a></h1>
    </div>
    
    
    <ul>
      <li class="menu01"><a href="#">ホーム<br>
        <span>HOME</span></a></li>
      <li class="menu02"><a href="#">会社概要<br>
        <span>COMOPANY</span></a></li>
      <li class="menu03"><a href="#">事業内容<br>
        <span>WORKS</span></a></li>
      <li class="menu04"><a href="#">ニュース<br>
        <span>NEWS</span></a></li>
      <li class="menu05"><a href="#">採用情報<br>
        <span>RECRUIT</span></a></li>
      <li class="menu06"><a href="#">お問い合わせ<br>
        <span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>

<section> 
  
  
  <div class="slide">
  	<img src="img/slideshow/slide1_nkflag.jpg" width="1280" height="600" alt="北朝鮮国旗">
    <img src="img/slideshow/slide2_3kim.jpg" width="1280" height="600" alt="金日成・金正日・金正恩">
    <img src="img/slideshow/slide3_juche.jpg" width="1280" height="600" alt="チュチェ思想塔">
    <img src="img/slideshow/silde4_pyongyang.jpg" width="1280" height="600" alt="平壌">
    <img src="img/slideshow/silde5_parade.jpg" width="1280" height="600" alt="軍事パレード">
  </div>
   
  
</section>

<section>

	
    <div id="company_discription">
    	<p>”人間が全ての事の主人であり、全てを決める”</p>
    </div>
    

</section>

</body>
</html>

```

<CSS>
```ここに言語を入力
@charset "UTF-8";
/* CSS Document */

/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */

/* -------------------------------------------- */
/* ▼PC用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media all and (min-width: 608px) {
	
* {
	margin:0;
	padding:0;
}

body {
	color:#333;
}
a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

h1 {
  	width:250px;
  	height:60px;
  	background-image:url("../img/logo.png");
  	background-repeat:no-repeat;
	
}

h1 span {
	display:none;
}

h1 a {
	display:block;
  	width:210px;
  	height:60x;
}

.logo {
	float:left;
	width:250px;
	padding-right:20px;
}

nav {
	background-color:#fff;
	padding-top:10px;
	display: flex;
	justify-content: center;
	height: 82px; /* 高さ */
  	width: 100%; /* 長さ */
  	position: fixed; /* ヘッダーを固定(これが重要) */
  	top: 0; /* 固定する位置 */
	left: 0; /* 固定する位置 */
  	right: 0;  /* 固定する位置 */
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
}

nav li {
	list-style:none;
	float:left;
	text-align:center;
	overflow: hidden;
	
}

nav .menu01, .menu02, .menu03, .menu04, .menu05, .menu06 {
	width:125px;
	background-color:#FFF;
	font-weight:bold;
}

nav .menu02, .menu03, .menu04, .menu05, .menu06 {
	border-left: solid 1px #CCC;
	-moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   
}

nav a {
	width:100%;
	display:block;
}

nav span {
	
	color:#CCC;
	font-weight:100;
	line-height:3em;
}

nav a:link { color: #333; }
nav a:visited { color: #333; }
nav a:hover { color: #333; }
nav a:active { color: #333; }

a {
	text-decoration:none;
}

.clearfix {
 *zoom: 1;
}
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

}

.slide {
	position : relative;
	overflow : hidden;
	top:93px;
	/* 画像のサイズに合わせて変更ください */
  	width : 1280px;
	height : 600px;
	margin : auto;      /* サンプルは中央寄せの背景：白 */
}
/*=== 画像の設定 ======================================= */
.slide img {
	display : block;
	position : absolute;
	/* 画像のサイズを表示エリアに合せる */
  	width : inherit;
	height : inherit;
	left : 100%;
	animation : slideAnime 15s ease infinite;
	z-index: -1;
}
/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) {
	animation-delay: 0s
}
.slide img:nth-of-type(2) {
	animation-delay: 3s
}
.slide img:nth-of-type(3) {
	animation-delay: 6s
}
.slide img:nth-of-type(4) {
	animation-delay: 9s
}
.slide img:nth-of-type(5) {
	animation-delay: 12s
}

 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime {
 0% {
left: 100%
}
 1% {
left: 0
}
 19% {
left: 0
}
 20% {
left: -100%
}
 100% {
left: -100%
}
}

#company_discription {
	width:100%;
	margin-top:93px;
	background-image:url(../img/sc2_nk_flag_bg.jpg),url(../img/sc2_nk_flag_bg_1px.jpg);
	background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
	repeat; /* 再背面の背景レイヤーに対応 */
	height:150px;
}

#company_discription p {
	width:100%;
	word-break: keep-all;
	color:#faee00;
	text-align:center;
	vertical-align:middle;
	font-size:36px;
	font-weight:bold;
}
```

**「現状」**
![イメージ説明](7f3486d1bcd64a2f8544d01366a890b5.png)
「画面を小さくしてみる」
![![イメージ説明](94704d7ca688093cef28f8ba43b21552.jpeg)]
![イメージ説明](301c8561d36dc4d21dbfa0df78b253ae.jpeg)

**「試したこと」**
```ここに言語を入力

#company_discription {
	width:100%;
	margin-top:93px;
	background-image:url(../img/sc2_nk_flag_bg.jpg),url(../img/sc2_nk_flag_bg_1px.jpg);
	background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
	repeat; /* 再背面の背景レイヤーに対応 */
	height:150px;
}

```
「height:150px;」を「line-height:150px;」に変更した。
すると通常画面では縦横中央に文字が表示されるが画面を小さくすると以下のようになってしまう。
![イメージ説明](b01a18a0f195f23cbfcf63844b4fe2d6.png)

レスポンシブサイトを作っています。（北朝鮮っぽいのはネタで作っているだけです）

下記の黄色の文字の部分を北朝鮮の国旗の縦の中央寄せにしたいのですが、うまくいきません。

よい方法はありますでしょうか？

<html>
```ここに言語を入力
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main_style.css">
<link rel="stylesheet" type="text/css" href="css/index_style.css">
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
<header>
  <nav class="clearfix"> 
    
    
    <div class="logo">
      <h1><a href="index.html"><span>株式会社DPRK</span></a></h1>
    </div>
    
    
    <ul>
      <li class="menu01"><a href="#">ホーム<br>
        <span>HOME</span></a></li>
      <li class="menu02"><a href="#">会社概要<br>
        <span>COMOPANY</span></a></li>
      <li class="menu03"><a href="#">事業内容<br>
        <span>WORKS</span></a></li>
      <li class="menu04"><a href="#">ニュース<br>
        <span>NEWS</span></a></li>
      <li class="menu05"><a href="#">採用情報<br>
        <span>RECRUIT</span></a></li>
      <li class="menu06"><a href="#">お問い合わせ<br>
        <span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>

<section> 
  
  
  <div class="slide">
  	<img src="img/slideshow/slide1_nkflag.jpg" width="1280" height="600" alt="北朝鮮国旗">
    <img src="img/slideshow/slide2_3kim.jpg" width="1280" height="600" alt="金日成・金正日・金正恩">
    <img src="img/slideshow/slide3_juche.jpg" width="1280" height="600" alt="チュチェ思想塔">
    <img src="img/slideshow/silde4_pyongyang.jpg" width="1280" height="600" alt="平壌">
    <img src="img/slideshow/silde5_parade.jpg" width="1280" height="600" alt="軍事パレード">
  </div>
   
  
</section>

<section>

	
    <div id="company_discription">
    	<p>”人間が全ての事の主人であり、全てを決める”</p>
    </div>
    

</section>

</body>
</html>

```

<CSS>
```ここに言語を入力
@charset "UTF-8";
/* CSS Document */

/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */

/* -------------------------------------------- */
/* ▼PC用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media all and (min-width: 608px) {
	
* {
	margin:0;
	padding:0;
}

body {
	color:#333;
}
a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

h1 {
  	width:250px;
  	height:60px;
  	background-image:url("../img/logo.png");
  	background-repeat:no-repeat;
	
}

h1 span {
	display:none;
}

h1 a {
	display:block;
  	width:210px;
  	height:60x;
}

.logo {
	float:left;
	width:250px;
	padding-right:20px;
}

nav {
	background-color:#fff;
	padding-top:10px;
	display: flex;
	justify-content: center;
	height: 82px; /* 高さ */
  	width: 100%; /* 長さ */
  	position: fixed; /* ヘッダーを固定(これが重要) */
  	top: 0; /* 固定する位置 */
	left: 0; /* 固定する位置 */
  	right: 0;  /* 固定する位置 */
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
}

nav li {
	list-style:none;
	float:left;
	text-align:center;
	overflow: hidden;
	
}

nav .menu01, .menu02, .menu03, .menu04, .menu05, .menu06 {
	width:125px;
	background-color:#FFF;
	font-weight:bold;
}

nav .menu02, .menu03, .menu04, .menu05, .menu06 {
	border-left: solid 1px #CCC;
	-moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   
}

nav a {
	width:100%;
	display:block;
}

nav span {
	
	color:#CCC;
	font-weight:100;
	line-height:3em;
}

nav a:link { color: #333; }
nav a:visited { color: #333; }
nav a:hover { color: #333; }
nav a:active { color: #333; }

a {
	text-decoration:none;
}

.clearfix {
 *zoom: 1;
}
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

}

.slide {
	position : relative;
	overflow : hidden;
	top:93px;
	/* 画像のサイズに合わせて変更ください */
  	width : 1280px;
	height : 600px;
	margin : auto;      /* サンプルは中央寄せの背景：白 */
}
/*=== 画像の設定 ======================================= */
.slide img {
	display : block;
	position : absolute;
	/* 画像のサイズを表示エリアに合せる */
  	width : inherit;
	height : inherit;
	left : 100%;
	animation : slideAnime 15s ease infinite;
	z-index: -1;
}
/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) {
	animation-delay: 0s
}
.slide img:nth-of-type(2) {
	animation-delay: 3s
}
.slide img:nth-of-type(3) {
	animation-delay: 6s
}
.slide img:nth-of-type(4) {
	animation-delay: 9s
}
.slide img:nth-of-type(5) {
	animation-delay: 12s
}

 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime {
 0% {
left: 100%
}
 1% {
left: 0
}
 19% {
left: 0
}
 20% {
left: -100%
}
 100% {
left: -100%
}
}

#company_discription {
	width:100%;
	margin-top:93px;
	background-image:url(../img/sc2_nk_flag_bg.jpg),url(../img/sc2_nk_flag_bg_1px.jpg);
	background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
	repeat; /* 再背面の背景レイヤーに対応 */
	height:150px;
}

#company_discription p {
	width:100%;
	word-break: keep-all;
	color:#faee00;
	text-align:center;
	vertical-align:middle;
	font-size:36px;
	font-weight:bold;
}
```

**「現状」**
![イメージ説明](7f3486d1bcd64a2f8544d01366a890b5.png)
「画面を小さくしてみる」
![![イメージ説明](94704d7ca688093cef28f8ba43b21552.jpeg)]
![イメージ説明](301c8561d36dc4d21dbfa0df78b253ae.jpeg)

**「試したこと」**
```ここに言語を入力
![イメージ説明](bebbba28dcc1188815ff1a76756e7bf8.png)

#company_discription {
	width:100%;
	margin-top:93px;
	background-image:url(../img/sc2_nk_flag_bg.jpg),url(../img/sc2_nk_flag_bg_1px.jpg);
	background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
	repeat; /* 再背面の背景レイヤーに対応 */
	height:150px;
}

```
「height:150px;」を「line-height:150px;」に変更した。
すると通常画面では縦横中央に文字が表示されるが画面を小さくすると以下のようになってしまう。
![イメージ説明](b01a18a0f195f23cbfcf63844b4fe2d6.png)

@@ -562,8 +562,6 @@
 ```ここに言語を入力
-![イメージ説明](bebbba28dcc1188815ff1a76756e7bf8.png)
 #company_discription {

質問編集履歴