1

ブラックボックスを垂直方向と水平方向の中央に配置しようとしています! 水平方向のセンタリングについては、試しmargin: autoましたが、高解像度では機能しません。

ヒーローエリアをレスポンシブにしようとしています。ウィンドウの幅を狭くすると、ブラック ボックスが中央に配置されますが、幅を大きくすると左に残ります。

また、水平に揃えるのを手伝ってください！背景の調整も手伝ってください！

したがって、私の問題は次のとおりです:-

  1. ブラックボックスを垂直方向と水平方向の中央に配置したい!
  2. 赤い背景を調整してレスポンシブにするのを手伝ってください

#header{
	width: 100%;
	height: 100px;
	background: rgba(0,0,0,0.7);
}

#heroarea{
	max-width: 100%;
	height: calc(100vh - 100px);
	background:red;
	position: relative;
}

#hero-intro-box{
	background: rgba(0,0,0,0.8);
	width: 100%;
	max-width: 800px;
	height: auto;
	border: 1px solid white;
	border-radius: 15px;
	padding: 10px;
	padding-bottom: 30px;
	margin: auto;

}

#hero-intro-box h1{
	color: white;
	text-align: center;
	padding-top: 3%;
}

#hero-intro-box p{
	color: white;
	margin: 15px;
	padding: 3%;
	padding-top: 2%;
}

#hero-intro-box #book-now-button{
	height: 50px;
	width: 150px;
	background: rgba(255,255,255,0.5);
	text-align: center;
	border-radius: 15px;
	border: 2px solid darkgrey;
	margin: auto;
}

@media (max-width: 400px) {
	#heroarea{
		height: 600px;
	}

	#hero-intro-box{
		height: auto;
		margin-bottom: 30px;
		position: relative;
		top: 0px;
		bottom: 0px;
	}

}

@media (min-width: 550px) {
	#heroarea{
		height: calc(100vh - 100px);
	}	
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />

  <div id="header">
      <div class="container">
      </div>
  </div>

  <div id="heroarea">
      <div class="container">
          <div  id="hero-intro-box" class="ten columns">
              <h1>Enjoy world-class Cuisines</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
              <div id="book-now-button">Book us now!!</div>
          </div>
      </div>
  </div>

4

1 に答える 1

0

要素を配置する最も信頼できる方法は、CSS3 テーブル レイアウトを使用することです。詳細については、この記事を参照してください。

以下のコードでは、この手法を使用しました。全画面モードで、ウィンドウのサイズ変更中にどのように動作するかを確認してください。また、ページ全体のサイズに合わせて背景を修正し、「今すぐ予約してください!!」のテキストを中央に配置しました。ボタンをクリックして、テキストを両端揃えにします (より美しくします)。

body {
  margin: 0;
  }

#header{
	width: 100%;
	height: 100px;
	background: rgba(0,0,0,0.7);
}

#heroarea{
    width: 100%;
	height: calc(100vh - 100px);
	background-color:red;
}

.container {
    display: table;
	width: 100%;  
    height: 100%;  
}

.container > span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#hero-intro-box{
	background: rgba(0,0,0,0.8);
	width: 100%;
	max-width: 800px;
	height: auto;
	border: 1px solid white;
	border-radius: 15px;
	padding: 10px 10px 30px 10px;
}

#hero-intro-box h1{
	color: white;
	text-align: center;
	padding-top: 3%;
}

#hero-intro-box p{
	color: white;
	margin: 15px;
	padding: 3%;
	padding-top: 2%;
    text-align: justify;
}

#hero-intro-box #book-now-button{
    display: table;
	height: 50px;
	width: 150px;
	background: rgba(255,255,255,0.5);
	text-align: center;
	border-radius: 15px;
	border: 2px solid darkgrey;
    margin: 0 auto;
}

#book-now-button > span{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 400px) {
	#heroarea{
		height: 600px;
	}

	#hero-intro-box{
		height: auto;
		margin-bottom: 30px;
		position: relative;
		top: 0px;
		bottom: 0px;
	}

}

@media (min-width: 550px) {
	#heroarea{
		height: calc(100vh - 100px);
	}	
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />

  <div id="header">
      <div class="container">
      </div>
  </div>

  <div id="heroarea">
      <div class="container">
          <span>
          <div  id="hero-intro-box" class="ten columns">
              <h1>Enjoy world-class Cuisines</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
              <div id="book-now-button"><span>Book us now!!</span></div>
          </div>
          </span>
      </div>
  </div>

于 2015-01-17T17:57:55.130 に答える