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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

718閲覧

画像を横並びにして中央に揃えたい

Flotsam

総合スコア11

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2020/04/09 18:11

現在この添付しこの画像を横一列に揃え文字を画像上下に添えて中央に揃えるにはどうしたらよいでしょうか
イメージ説明

HTML`

<div class="lesson-items"> <div class="lesson-item"> <p>テキスト</p> <img src="画像URL"> <p2>テキスト</p2>     </div>
<div class="lesson-item"> <p>テキスト</p> <img src="画像URL"> <p2>テキスト</p2>

    </div>
</div>

<div class="lesson-item"> <p>テキスト</p> <img src="画像URL"> <p2>テキスト</p2>

    </div>
</div>
</div>

CSS}
.lesson-items {
height: 600px;
margin-top: 100px;
margin-bottom: 100px;
}
.lesson-item{
float: left;
margin-left: 10px;
display:block;}
.lesson-item img{
height: 20%;
width: 20%;
}
.lesson-item p{
font-size:12px;
margin-bottom: 10px;
}
.lesson-item p2{
font-size:14px;
margin-bottom: 10px;
}

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

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

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

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

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

guest

回答1

0

ベストアンサー

「中央に揃える」というのが、揃える対象、何を基準にするのか不明確です。

とりあえず、親要素に対して、水平位置、垂直位置を中央にする場合の設定を回答しておきます。

css

1.lesson-items { 2 height: 600px; 3 margin-top: 100px; 4 margin-bottom: 100px; 5 display: flex; /*子要素を横並び*/ 6 justify-content: center; /*水平位置中央寄せ*/ 7 align-items: center; /*垂直位置中央寄せ*/ 8} 9.lesson-item{ 10 margin-left: 10px; 11} 12.lesson-item img { 13 display: block; 14} 15.lesson-item p{ 16 font-size:12px; 17 margin-bottom: 10px; 18} 19.lesson-item .p2 { 20 font-size:14px; 21 margin-bottom: 10px; 22}

ちなみに、HTMLに p2 というタグがありますが、そのようなタグは存在しないので、pにしてください。
他のpと別のCSSを設定したい場合はクラスを付加してください。

html

1<div class="lesson-items"> 2 <div class="lesson-item"> 3 <p>テキスト</p> 4 <img src="https://placehold.jp/200x200.png"> 5 <p class="p2">テキスト</p> 6 </div> 7 8 <div class="lesson-item"> 9 <p>テキスト</p> 10 <img src="https://placehold.jp/200x200.png"> 11 <p class="p2">テキスト</p> 12 </div> 13 14 15 <div class="lesson-item"> 16 <p>テキスト</p> 17 <img src="https://placehold.jp/200x200.png"> 18 <p class="p2">テキスト</p> 19 </div> 20</div>

投稿2020/04/09 20:19

hatena19

総合スコア34075

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

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

Flotsam

2020/04/10 05:34

ご回答ありがとうございます。 いただいたコードを参考にさせいていただいたところ解決いたしました。 今後質問させていただく際は基準等を明確に表現できるよう努めてまいりますので、次回質問をさせていただいた時機会があればよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問