Q&A
（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
リンクぺージへ飛ばすことができるaタグimg画像の上に
同じくリンク先へ飛ばすaタグ文字を均等に配置したいのですが、
文字がずれてしまう状況で、うまくできません。
etc-wrapperの画像、文字両方から同じリンク先に飛ばすために
aタグを使用していますが、画像をimg、文字をpやh2にすると、
画像の真ん中にちゃんと文字が表示されます。
・具体的なエラーメッセージとしまして、
表示されたサイト画面のスクショを添付いたしました。
ご確認していただければ幸いです。
以下、エラー箇所である「etc-wrapper」のHTML、CSSコードとなります。
（添付画像上部のheaderのコードも記入しました）
よろしくお願いいたします。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>●○○○○●○○○○</title> 6 <link rel="stylesheet" href="style01.css"> 7 </head> 8 <body> 9 <header> 10 <div class="container"> 11 <div class="header-left"> 12 <p>●○○○○</p> 13 <img src="●○○○○"> 14 </div> 15 <div class="header-right"> 16 <p>●○○○○</p> 17 <a>●○○○○</a> 18 <a>●○○○○</a> 19 <a>●○○○○</a> 20 <a>●○○○○</a> 21 <a>●○○○○</a> 22 <a>●○○○○</a> 23 </div> 24 </div> 25 </header> 26<div class="etc-wrapper"> 27 <div class="container"> 28 <div class="heading"> 29 <h2>●○○○○</h2> 30 </div> 31 <div class="etcs"> 32 <div class="etc"> 33 <div class="etc-icon"> 34 <a href="#"><img src="●○○○○"></a> 35 <a href="#" class="etc-p">●○○○○</a> 36 </div> 37 </div> 38 <div class="etc"> 39 <div class="etc-icon"> 40 <a href="#"><img src="●○○○○"></a> 41 <a href="#" class="etc-p">●○○○○</a> 42 </div> 43 </div> 44 <div class="etc"> 45 <div class="etc-icon"> 46 <a href="#"><img src="●○○○○"></a> 47 <a href="#" class="etc-p">アクセス</a> 48 </div> 49 </div> 50 </div> 51 </div> 52 </div>
CSS
1body { 2 margin: 0; 3 font-family: "Hiragino Mincho ProN"; 4} 5a { 6 text-decoration: none; 7} 8.container { 9 max-width: 1170px; 10 width: 100%; 11 margin: 0 auto; 12 font-weight: normal; 13} 14header { 15 padding-top: 10px; 16 padding-bottom: 20px; 17 height: 80px; 18 position: fixed; 19 z-index: 10; 20 top: 0; 21 width: 100%; 22 background-color: white; 23 filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.2)); 24} 25.header-left { 26 float: left; 27} 28.header-left p { 29 font-size: 12px; 30 color: grey; 31 letter-spacing: 5px; 32} 33.header-left img { 34 width:220px; 35} 36.header-right { 37 float: right; 38 text-align: right 39} 40.header-right p { 41 padding-bottom: 10px; 42 font-size: 12px; 43 color: grey; 44 letter-spacing: 5px; 45} 46.header-right a { 47 letter-spacing: 5px; 48 padding-left: 40px; 49 font-size: 14px; 50 font-weight: bold; 51} 52.etc-wrapper { 53 height: 500px; 54 text-align: center; 55 margin-top: 120px; 56} 57.etc { 58 float: left; 59 width: 33%; 60} 61.etc-icon { 62 position: relative; 63} 64.etc-icon img { 65 width: 300px; 66} 67.etc-p { 68 position: absolute; 69 width: 100%; 70 top: 130px; 71 font-weight: bold; 72 letter-spacing: 8px; 73 color: white; 74 font-size: 22px; 75 text-shadow:0 0 5px forestgreen; 76}
回答2件
0
.etc-wrapper に text-align: center; が付いているので、下記指定を追加すれば中央に配置されると思います。position: absolute;をしたときのleftの規定値は要素がもともとあった場所だったような気がします。
CSS
1.etc-p { 2 left: 0; 3} 4```**動くサンプル：**[https://jsfiddle.net/x8yrethm/](https://jsfiddle.net/x8yrethm/)
投稿2020/08/05 05:57
総合スコア69606
0
ベストアンサー
下記でどうでしょう。
css
1.etc-p { 2 position: absolute; 3 width: 100%; 4 top: 50%; /* 修正 */ 5 transform: translateY(-50%); /* 追加 */ 6 left:0; /* 追加 */ 7 font-weight: bold; 8 letter-spacing: 8px; 9 color: white; 10 font-size: 22px; 11 text-shadow:0 0 5px forestgreen; 12}
投稿2020/08/05 05:20
総合スコア34075
hatena19 様
ご連絡ありがとうございます。
ちゃんと表示されました。
transformについてわからない点があり、
お手数おかけしますが、以下１点、ご質問させていただきました。
・imgタグにpなどは transformなしで重ねることはでき、
aタグimgにaタグ文字を重ねるにはtransformを使わなければうまく表示されないのはなぜでしょうか。
お手数おかけしますが、ご回答いただけると幸いです。
よろしくお願いいたします。
transform を使わなくても、left: 0; だけでも大丈夫です。
transform は親要素のサイズに依存せずに上下中央寄せするために追加したものです。
https://arts-factory.net/position/
hatena19 様
ご回答いただき、誠にありがとうございます。
参照URLも添付していただき、ありがとうございました。
ベストアンサーとさせていただきました。
あなたの回答
tips
プレビュー
