[HTML/CSS] ヘッダーの中央寄せ、写真の上にそれぞれの文章を重ねるようにしたい（デバイスを違えても）

現在見本に合わせてテスト的に作成してるページがあるのですが、
なかなか思うように作れません。

今突っかかっている問題は

ヘッダーの中央寄せがレスポンシブデザイン化できていない。
また後述にある見本のようにテキストを写真に重ねたいと思っているのですが

うまくいかない（これもレスポンシブデザイン前提）

です。

どのように作成にすればよいか皆様からアドバイスいただけると助かります。

見本はこのようなデザインです。（画像がなぜか横のまま直せませんでした。すみません）

私の現在のコードは以下のものになります。

<HTML>

	<html>
	<head>
		<meta charset="utf-8">
		<title>Cha-an Special Cocktails</title>
		<link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
		<header>
			<div class="header-container clearfix">
				<img src="img/cha_logo.gif" alt="logo_title">
				<h1>Special Cocktails</h1>
			</div>
		</header><!-- /header -->
		
		<!-- contents -->
		<div class="liqd-container">
			<div class="liqd-item-wrap">
				<img src="img/cocktail_1.jpg" alt="cocktail_1">

				<div class="liqd-txt-wrap">
					<h3 class="txt_center">Summer Wind</h3>
					<p class="txt_center">Fruit Ice Balls</p>
					<p class="txt_center">&amp Peach Sparkling Jelly Juice</p>
					<div class="circle"><p>15</p></div>
				</div>	
			</div>			

			<div class="liqd-item-wrap">
				<img src="img/cocktail_1.jpg" alt="cocktail_1">

				<div class="liqd-txt-wrap">
					<h3 class="txt_center">Summer Wind</h3>
					<p class="txt_center">Fruit Ice Balls</p>
					<p class="txt_center">&amp Peach Sparkling Jelly Juice</p>
					<div class="circle"><p>15</p></div>
				</div>	
			</div>			

			<div class="liqd-item-wrap">
				<img src="img/cocktail_1.jpg" alt="cocktail_1">

				<div class="liqd-txt-wrap">
					<h3 class="txt_center">Summer Wind</h3>
					<p class="txt_center">Fruit Ice Balls</p>
					<p class="txt_center">&amp Peach Sparkling Jelly Juice</p>
					<div class="circle"><p>15</p></div>
				</div>	
			</div>
			
		</div>
		<!-- end contents -->
		
		<footer>
			<p>developed by *** ****</p>	
		</footer>
	</body>
</html>

<CSS> ``` /* clearfix */ .clearfix:after { visibility: hidden; display: block; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /* End clearfix */

img{width:100%;}

h1 {font-family: 'Montserrat', sans-serif;}

.txt_center{text-align: center;}

body
{
display: block;
margin: 3% 5%;
font-family: 'Robot', sans-serif;
}

/* Header Part */
header
{
margin-bottom: 3%;
}

.header-container img
{
float: left;
width: initial;
padding: 1% 2% 1% 0;
}

.header-container h1
{
float:left;
font-weight: bold;
border-left: 1px solid brown;
border-right: 1px solid brown;
text-transform: uppercase;
padding: 1% 2%;
margin: auto;
letter-spacing: 0.1rem;
}
/* End Header Part */

/* Item Part */

/* For Liquid raiout */
.liqd-container
{
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: stretch;
}

.liqd-item-wrap
{
background: rgba(242,242,242,0.5);;
padding: 20px;
width: 600px;
}

.liqd-txt-wrap
{
background: rgba(242,242,242,0.5);;
padding: 20px;
}

.textwrap h3 {color: purple}

.circle
{
background-color: purple;
text-align: center;
border-radius: 50px;
height: 50px;
width: 50px;
margin: 0 auto;
}

.circle p {
position: relative;
top:50%;
transform: translateY(-50%);
font-family: sans-serif;
font-weight: bold;
color: #fff;
}
/* End Item Part */

/* Footer Part /
footer p
{
text-align: right;
}
/ End Footer */


お手数おかけしますが、ご協力いただけると大変助かります。
よろしくお願いいたします。

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

回答1件

ベストアンサー

レスポンシブレイアウトというより、リキッドレイアウトだと思いますが、
問題の点は以下のようにして解決できないでしょうか？

ヘッダー内要素の中央揃え

css
1header
2{
3    margin-bottom: 3%;
4    text-align: center; /* 追加 */
5}
6
7.header-container img
8{
9    /* float: left; */
10    width: initial;
11    padding: 1% 2% 1% 0;
12}
13
14.header-container h1
15{
16    /* float:left; */
17    display: inline-block; /* 追加 */
18    font-weight: bold;
19    border-left: 1px solid brown;
20    border-right: 1px solid brown;
21    text-transform: uppercase;
22    padding: 1% 2%;
23    margin: auto;
24    letter-spacing: 0.1rem;
25}

画像にテキストを重ねる

css
1.liqd-item-wrap
2{
3    background: rgba(242,242,242,0.5);;
4    padding: 20px;
5    width: 600px;
6
7    position: relative; /* 追加 */
8}
9
10 .liqd-txt-wrap
11{
12    background: rgba(242,242,242,0.5);;
13    padding: 20px;
14
15    position: absolute; /* 追加 */
16    bottom: 0; /* 追加 */
17    left: 0; /* 追加 */
18    width: 100%; /* 追加 */
19}

投稿2017/07/03 00:18

編集2017/07/03 07:24

退会済みユーザー

総合スコア0

syk.tmr

2017/07/03 06:51

回答ありがとうございます。これリキッドデザインだったんですね。そのあたりの違いはいまいち分別がついてないところでしたのですみません。おかげさまでヘッダーの中央化はうまくいきました。ただし画像にテキストを重ねる点については見本のように＜写真＞→＜半透明の背景＞→＜文字＞と重ねたいのですが未だうまくいかないままです。何かしら良い解決方法はこういった場合にあるかご存知ありますか？度々の質問ですみません。

退会済みユーザー

2017/07/03 07:28

「画像にテキストを重ねる」で実現されたいことを勘違いしていたので、同CSSを修正しました。

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