前提
progateのレッスンで、ウェブページを作っています。
見本通りに画像と文字を重ねることができません。
実現したいこと
画像上段は、自分が作っているページです。
下段が、見本になります。
4つの画像の中央に、それぞれ文字を重ねたいです。
該当のソースコード
HTML
1 2<section class="second-wrapper"> 3 <div class="container"> 4 <h2>Learn Where to Get Started!</h2> 5 6<div class="lesson"> 7 <figure> 8 <img class="icon" src="https://prog-8.com/images/html/advanced/html.png"> 9 <p class="name">HTML & CSS</p> 10 <figcaption class="icon-directon"> 11 ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。 12 </figcaption> 13 </figure> 14 15 <figure> 16 <img class="icon" src="https://prog-8.com/images/html/advanced/jQuery.png"> 17 <p class="name">jQuery</p> 18 19 <figcaption class="icon-directon"> 20 素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。 21 </figcaption> 22 </figure> 23 24 <figure> 25 <img class="icon" src="https://prog-8.com/images/html/advanced/ruby.png"> 26 <p class="name">Ruby</p> 27 28 <figcaption class="icon-directon"> 29 オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。 30 </figcaption> 31 </figure> 32 33 <figure> 34 <img class="icon" src="https://prog-8.com/images/html/advanced/php.png"> 35 <p class="name">PHP</p> 36 37 <figcaption class="icon-directon"> 38 HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。 39 </figcaption> 40 </figure> 41 42 </div> 43 </div> 44 </section> 45
CSS
1/* CSSのリセット(消さないでください) */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, div { 5 margin: 0; 6 padding: 0; 7} 8 9body { 10 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 11} 12 13li { 14 list-style: none; 15} 16 17a { 18 text-decoration: none; 19} 20 21/* ここからCSSを書いていきましょう */ 22 23.second-wrapper { 24 background-color: #f7f7f7; 25 height: 580px; 26} 27 28.container { 29 width: 1170px; 30 margin: 0 auto; 31 } 32 33h2 { 34 text-align: center; 35 color: #5f5d60; 36 font-weight: normal; 37 padding: 80px 0 50px 0; 38} 39 40.lesson { 41 display: flex; 42 width: 100%; 43 44} 45 46figure { 47 width: 80%; 48 position: relative; 49 50} 51 52figcaption { 53 padding-top: 15px; 54} 55 56.icon { 57 58} 59 60.name { 61 /*color: white;*/ 62 position: absolute; 63 top: 90px; 64} 65 66.icon-directon { 67 color: #b3aeb5; 68 font-size: 13px; 69 padding-top: 15px; 70} 71
試したこと
.name に right: を設定してみましたが、うまく中央に揃えることができませんでした。
補足情報(FW/ツールのバージョンなど)
「基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となる」
と勉強したのですが、文字の位置を調整する前は、画像の左上に表示されるのではなく、
以下の画像のように、アイコンの説明部分の左上に表示されてしまいます。
.name {
/color: white;/
position: absolute;
top: 90px;
}
の場合、文字が下に90px動くと思いましたが、意図せず画像の縦中央におさまりました。
これは、私のposition: relative;の定義の認識が間違っているのでしょうか。
それともコードがおかしいがために、このように動いてしまうのでしょうか。
あわせて回答いただけると、とても助かります。
回答2件