見出し h1 cssで画像の中央に文字を入れたいのですがうまくいきません

html
1   <div class="lessons">
2      <div class="lesson-item">
3       <img class="item" src="https://prog-8.com/images/html/advanced/html.png"
4       >
5       <p>HTML & CSS</p>
6       </div>
7        <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。
8  </p>
9  
10  </div>
11    <div class="lessons">
12  <div class="lesson-item">
13  <img class="item" src="https://prog-8.com/images/html/advanced/jQuery.png
14">
15<p>jQuery</p>
16</div>
17 <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。
18</p>
19</div>
20  <div class="lessons">
21<div class="lesson-item">
22<img class="item" src="https://prog-8.com/images/html/advanced/ruby.png">
23<p>javascript</p>
24</div>
25
26 <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。
27</p>
28</div>
29  <div class="lessons">
30<div class="lesson-item">
31<img class="item" src="https://prog-8.com/images/html/advanced/php.png">
32<p>PHP</p>
33</div>
34 <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。
35</p>
36     </div>
37     </div>
38     </div>
39 
40
41```css
42   .lesson-logo{
43  height:580px;
44
45  
46}
47
48 .lesson {
49   
50   color:#5f5d60;
51    text-align:center;
52    margin-top:80px;
53    margin-bottom:50px;
54    font-weight:normal;
55 }
56  
57     
58  
59  .lessons{
60    float:left;
61    width:25%;
62    
63  }
64    .lesson-item{
65    
66    position:relative;
67   }
68   
69 .lesson-item p{
70    position:absolute;
71
72  top: 90px;
73  width: 100%;
74  color: red;
75  opacity:1;
76
77 }
78 
79    .text-contents {
80  width: 80%;
81  display: inline-block;
82  margin-top: 15px;
83  font-size: 13px;
84  color:  #b3aeb5;
85  text-align:center;
86}

hatena19

2020/03/24 12:01

HTMLコードも提示してください。あと、コードはマークダウンのコードブロック内に入れてください。 ```html ここにHTMLコードを記述 ``` ```css ここにCSSコードを記述 ```

hatena19

2020/03/24 13:55

依頼に対応ありがとうございます。 HTMLはコードブロックに入りましたが、CSSがコードブロックになってません。 cssの前に ``` を挿入してください。あと、六角形の画像の中央に、「HTML & CSS」「jQuery」などのテキストを配置したいということですね。 lessonsブロック内て、画像や下部の解説テキストは中央になってないのですが、それも中央寄せにした方がよくないですか。

kawasaki4563

2020/03/26 02:40

協力本当にありがとうございます。人の優しさが身に染みて本当に幸せな気持ちになりました。画像を中央にして .lesson-itemにtext-align:center;を入れたらできました

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

回答1件

ベストアンサー

lessonsブロック内て、六角形の画像、タイトルテキスト、下部の解説テキストが中央寄せにするという仕様にしました。
その方がバランスがいいと思いますので。
また、そうしないとCSSが複雑になりそうなので。

css
1.lessons{
2  float:left;
3  width:25%;
4}
5.lesson-item{
6  position:relative;
7  text-align: center; /* 追加 */
8}
9
10.lesson-item p{
11  position:absolute;
12  top: 90px;
13  width: 100%;
14  color: red;
15  opacity:1;
16}
17
18.text-contents {
19  width: 80%;
20  display: inline-block;
21  margin-top: 15px;
22  margin-left: 10%; /* 追加 */
23  font-size: 13px;
24  color:  #b3aeb5;
25  text-align:center;
26}