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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

Q&A

1回答

866閲覧

レスポンシブデザイン:画像をセンター表示

Mii-yama

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

0グッド

0クリップ

投稿2020/01/05 02:11

前提・実現したいこと

HTML/CSSでレスポンシブデザインにしております
「article」の部分で、スマートフォン表示にする際に
画像が真ん中に配置したいのですができません。

真ん中に表示する方法を教えて頂ければ幸いです

発生している問題・エラーメッセージ

レスポンシブデザイン(スマートフォン表示の際) 画像がセンターに表示されません (他の大きいサイズの際は文字の右側に配置しています)

該当のソースコード

html

1body { 2 margin: 0; 3 font-family: YuGothic; 4 color: #555555; 5} 6 7<div class="article"> 8 <div class="article-block"> 9 <div class="article-left"> 10 <h2>We are necessary for</h2> 11 <h2>human life.</h2> 12 <p>Because we are very cute. </p> 13 <p>Please leave it to us if you need help.</p> 14 <a href="#" class="btn">MORE</a> 15 </div> 16 17 <div class="article-img"> 18 <img src="img/img-right.jpg"> 19 </div> 20 </div> 21 22 </div>

css

1/* article */ 2.article { 3 display: flex; 4 width: 980px; 5 margin: 0 auto; 6} 7 8.article-block { 9 margin-top: 70px; 10 width: 980px; 11} 12 13.article-left { 14 float: left; 15 text-align: left; 16} 17 18.article h2 { 19 font-size: 32px; 20 line-height: 25px; 21} 22 23.article p { 24 padding-top: 20px; 25 font-size: 22px; 26 line-height: 0px; 27} 28 29.article a { 30 font-size: 22px; 31 color: #51A2BC; 32 text-decoration: none; 33 border: 2px solid #51A2BC; 34 border-radius: 30px; 35 padding: 5px 40px; 36 display: inline-block; 37 margin-top: 20px; 38} 39 40.article a:hover { 41 background-color: #51A2BC; 42 color: white; 43 border: 2px solid #51A2BC; 44} 45 46.article-img { 47 float: right; 48} 49 50@media (max-width: 1000px) { 51 .navbar { 52 width: 850px; 53 margin: 0 auto; 54 } 55 .ability { 56 width: 900px; 57 } 58 .ability-row { 59 float: left; 60 width: 300px; 61 } 62 .article { 63 width: 850px; 64 } 65 66 } 67 68@media (max-width: 670px) { 69 .navbar img { 70 width: 256px; 71 margin-left: 15px; 72 } 73 .landeing { 74 background-size: cover; 75 width: 100vw; 76 height: auto; 77 min-height: 100vh; 78 } 79 .ability { 80 width: 300px; 81 } 82 .ability h2 { 83 margin-top: 10px; 84 margin-bottom: 0px; 85 } 86 .ability p { 87 font-size: 20px; 88 margin-bottom: 40px; 89 } 90 .article { 91 width: 400px; 92 } 93 .article-block { 94 width: 400px; 95 } 96 .article-left { 97 text-align: center; 98 } 99 .article-img { 100 margin-top: 50px; 101 } 102 103 .ability-img { 104 margin: 0 auto; 105 text-align: center; 106 } 107}

試したこと

margin: 0 auto;
text-align: center;
等は試しました

補足情報(FW/ツールのバージョンなど)

VS Vodeを使用

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

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

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

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

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

guest

回答1

0

.article-left .article-imgfloat: none; を設定して、.article-imgtext-align: center;を設定してみてください。

投稿2020/01/05 02:24

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問