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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

1679閲覧

文、画像、文を横並びで均等に並べたいです。

yyymmm

総合スコア30

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2018/10/28 12:49

編集2018/10/28 13:00

イメージ説明文、画像、文を横並びで均等に並べたいです。
また、画像が中心にレイアウトできるよう、文字をそれぞれ画像の真ん中にくるように配置したいです・・・
今はただ横並びになっているだけ、という状態です。

(また、nameのところにclear: both;があるのは、
その前の要素の回り込みを防ぐために付けました)

html

1 2<p class="name">名前<br> 31993年生まれ ~~出身。</p> 4 <p class="img1"> <img src="me.png" alt="著者"></p> 5<p class="text1"> ~~~~<br> 6~~~~<br> 7~~~</p> 8 9```css 10 11.name{ 12clear: both; 13width: 33%; 14float:left; 15} 16 17.img1{ 18width: 33%; 19float:left; 20} 21 22.text1{ 23width: 33%; 24float:left; 25}

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

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

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

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

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

akihiro3

2018/10/28 12:56

画像に文を重ねることが希望でしょうか?
yyymmm

2018/10/28 12:58

コメントありがとうございます。いえ、それぞれ独立が希望です。画像にして載せますね
akihiro3

2018/10/28 12:59

理解力低くてすみません。助かります、よろしくお願いします。
yyymmm

2018/10/28 13:00

こちらこそ、わかりづらく申し訳ありませんでした。本当にありがとうございます
guest

回答2

0

ベストアンサー

「文字をそれぞれ画像の真ん中」

の意味がまだ理解できてないのですが、
とりあえずこんな感じで確認してください

html

1 <div class="flex"> 2 <p class="name" style="background:#aaf;">名前<br> 3 1993年生まれ ~~出身。 4 </p> 5 <p class="img1"></p> 6 <!-- <p class="img1"> <img src="me.png" alt="著者"></p> --> 7 <p class="text1" style="background:#ffa;"> ~~~~<br> 8 ~~~~<br> 9 ~~~ 10 </p> 11 </div>

css

1.flex { 2 width: 500px; 3 margin: 0 auto; 4 background: #ccc; 5 display: flex; /* flexbox */ 6 justify-content: center; /* 左右中央寄せ */ 7 align-items:center; /* 上下中央寄せ*/ 8} 9 10.img1 { 11 background: #00f; 12 width: 100px; 13 height: 100px; 14} 15 16.name, 17.img1, 18.text1 { 19 width: calc(100% / 3); 20 text-align: center; 21} 22

投稿2018/10/28 13:14

編集2018/10/28 13:30
akihiro3

総合スコア955

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

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

yyymmm

2018/10/28 13:23

ありがとうございます!なんかちょっとできそうです。イメージ的には画像のようにしたいです。
yyymmm

2018/10/28 13:31

できました!!!ありがとうございます。
yyymmm

2018/10/28 13:34

.flex { width: 1000px; margin: 0 auto; display: flex; /* flexbox */ justify-content: center; /* 中央寄せ */ align-items: center; /* 中央揃え*/ } .name, .img1, .text1 { width: calc(100% / 3); text-align: center; } で、いい感じに配置できました。
akihiro3

2018/10/28 13:35

おめでとうございます flexboxはとても便利で、私も大好きです 良く使えますので是非参考にしてみてください
guest

0

おすすめの解説サイトを紹介します。いろんな並べ方を詳しく解説してくださっています。

キーワード「flexboxコンテナ: justify-content」でページ内検索すると、
回答に合うような並べ方が見つかると思います。

CSS Flexbox の各プロパティの使い方を詳しく解説

投稿2018/10/28 12:59

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

yyymmm

2018/10/28 13:00

ありがとうございます。見てみます!
退会済みユーザー

退会済みユーザー

2018/10/28 13:07 編集

上下中央寄せは「flexboxコンテナ: align-items」のとこにあります。組み合わせれば、うまいこといくかなーと(ごめんなさい、見逃してました)。
yyymmm

2018/10/28 13:32

このサイト参考にさせていただきました!本当にありがとうございます。
yyymmm

2018/10/28 13:33

解決できました(^^)
yyymmm

2018/10/28 13:35

もう一人の方をベストアンサーにさせていただくのですが、このサイトを教えていただき本当にありがとうございました。。。今後も参考にさせていただきます。ご親切に、ありがとうございました。
退会済みユーザー

退会済みユーザー

2018/10/28 13:37

いえいえ~解決できたみたいでよかったです(`v`*)b
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問