質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1137閲覧

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

kawasaki4563

総合スコア32

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/03/24 11:59

編集2020/03/24 13:10

見出し 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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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;を入れたらできました
guest

回答1

0

ベストアンサー

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}

投稿2020/03/24 14:04

hatena19

総合スコア34075

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問