HTML5 レスポンシブ画像を「center」に文字を「left」にすると画像も左に・・・

Question

レスポンシブ作成初めてで一ヶ月ほど似たケース探しましたが分かりませんでした。
HTML5 に詳しい方ご指導どうぞ宜しくお願い致しますm(__)m

色々試しましたが画像をcenterにし「画像下の文字をleft」にすると画像もleftに移動してしまいます。

●HTML → http://ur0.work/vXI2   リンク先ソースにCSS全文書いてあります。
●CSS  ↓ ↓ ↓

/* ページ全体 */
body {
font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin:0;
background-color: #E9E9E9;
}

.title {
color: #eeeeee;
font-size: 19px;
text-align: center;
line-height: 2em;
font-weight: normal;
letter-spacing: 0.05em;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 全体のリック色 */
a:link {
text-decoration: none;
color: #1414ac;
}
a:visited {
text-decoration: none;
color: #5f5f67;
}
a:hover {
text-decoration: none;
color: #F00;
}
a:active {
text-decoration: none;
color: #F00;
}

.flex-cotainer {
display: flex;
flex-direction: column;
}

.wrapper{
display: flex;
min-height: 100vh;
flex-direction: column;
}

.flex-items {
flex: 1 0 auto;
background-color: #c1f4ca;
display: flex;
flex-wrap: wrap;
}

h1 {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 21px;
color: #FFFFFF;
text-align: center;
padding-top: 15px;
font-weight: 500;
letter-spacing: 0.05em;
}

.blue {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 25px;
color: #FFFFFF;
text-align: center;
padding-top: 15px;
font-weight: 500;
letter-spacing: 0.05em;
}


/* h1リンク色 */
h1 a:link {
text-decoration: none;
color: #FFFFFF;
}
h1 a:visited {
text-decoration: none;
color: #FFFFFF;
}
h1 a:hover {
text-decoration: none;
color: #dbf4f3;
}
h1 a:active {
text-decoration: none;
color:  #FFFFFF;
}

header{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 14px;
text-align: center; 
margin-top: 0px;
background: #100451;
background: -moz-linear-gradient(top, #100451 0%, #09057f 63%, #1d27b7 100%);
background: -webkit-linear-gradient(top, #100451 0%,#09057f 63%,#1d27b7 100%);
background: linear-gradient(to bottom, #100451 0%,#09057f 63%,#1d27b7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#100451', endColorstr='#1d27b7',GradientType=0 );
}

.content1 {
flex: 1 1 150px;
background-color: #aee9a4;
font-size: 12px;
text-align: center;

}
.content2 {
flex: 3 1 350px;
background-color: #c1f4ca;
text-align: center;
padding-bottom: 20px;
}


/* トップページ用になります */
#menu {
text-align: center;
margin-top: 20px;
margin-bottom: 5px;
font-weight: 200;
font-size: 22px;
}

/* menuクリック色 */
#menu a:link {
text-decoration: none;
color: #eeeeee;
}
#menu a:visited {
text-decoration: none;
color: #eeeeee;
}
#menu a:hover {
text-decoration: none;
color: #F00;
}
a:active {
text-decoration: none;
color: #F00;
}


/* トップページ用になります */
/* サイドメニュータイトル */
h2,h3,.mein-taitle {
font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #003366;
text-align: center;
margin-top: 40px;
font-size: 20px;
margin-bottom: 10px;
}


/* メインコンテンツここの「記述がおかしい」かと思っております */
#zukan p {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 18px;
color: #082203;
text-align: center;
line-height: 1.7em;
letter-spacing: 0.05em;
}


/* メインページ画像ナビゲーション */
.ph {
text-align: center;
}


/* フッター */
footer {
background-color:#000080;
color: #FFF;
text-align: center;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
padding-top: 2px;
font-size: 18px;
text-align: center;
width:100%;
}

@media (max-width: 700px) {
#content {
width: auto;
}
img {
max-width: 100%;
height: auto;
text-align: center;
}
}

fujillin · Accepted Answer

こんにちは＞「画像下の文字をleft」にすると画像もleftに移動してしまいます。としか記述がないので、「画像はcenter、文字はleft」にしたいのだと解釈するのが普通だろうと思います。それなので、No1様の回答は、素直で妥当な内容と言えるでしょう。＞画像は真ん中に表示され、テキストは「PC画面の左端によって」しまいすでは、いったいどこに「左寄せ」したいのでしょうかね…（笑) 以下に、いくつか例を挙げておきますが、結果は似ていても、（どこに合わせるかなどの順序も含めて）考え方によって、記述方法はいろいろとあると思います。（以下の例示以外にも、様々な考え方があります）まず、ご提示のCSSと（HTML）を単純化して以下と仮定します。（表示幅とレイアウトのみにしてあります。若干のmaginの違いなどは無視しています）

花の名前：アイスランドポピー（シベリアヒナゲシ）

ケシ科ケシ属一年草と多年草（3～6月）、草丈50cm シベリアが原産（シベリアヒナゲシ）

花言葉：七色の恋

① #zukan pの文字は左寄せにおするけれど、ぎりぎり左寄せという意味じゃないんだよ。単純に、左右に空きを取りたいのであれば　#zukan p { text-align: left; margin: 0 5em; } などに変えれば、左右に空きを確保できます。ただし、固定値の空きなので画像との位置関係は成り行きに見える。比率（％）などで空きをとることもできますが、似たり寄ったりですね。 ② じゃーなくてぇ、画像と同じ幅にして、文字は左寄せにしたいんだよぉぉ。画像のコントロールと同じ幅の制御をP要素に行って、文字は左寄せにするなら　#zukan p { text-align: left; margin: 0 auto; max-width: 680px; } ってな感じが、もしかするとお望みなのかなと… （幅の制御方法が同じ記法ではありませんけれど…）あとは、考え方を応用してゆけば、なさりたい形にできるのではないかと推測しますが、でも、その前に・・・上記の②は、現状からP要素のCSSだけで解決しようとしたもので、「画像幅と同じ」の意味に対して、単に同じ値を指定しているだけになっていて、必ずしも「画像と同じ幅」という意味にはなっていません。『親要素の幅を可変にして、子要素（=画像、P要素）はそれに従う』と考えると、間接的ですが「画像とP要素は同じ幅」という意味になるものと思います。といった観点から、上記の例示のCSSを見直してみると・・・ CSS全体を、このように置き換えても同じような表示になるものと思います。（多少は、すっきりしてきたかも・・・）

naokita · Answer

/* メインコンテンツここの「記述がおかしい」かと思っております */ #zukan p { /* text-align: center; ←ここを変更 */ text-align: left; id="zukan"配下にある

は、左寄せになる。画像は

外にあるので、例外として左寄せにはならない。 --------------------- もしくは、HTMLで、

左寄せにする場合は、CSSでtext-align: left;にする

これで左寄せになる

HTML5 レスポンシブ 画像を「center」に文字を「left」にすると画像も左に・・・

こんにちは

/* メインコンテンツここの「記述がおかしい」かと思っております */

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

HTML5 レスポンシブ画像を「center」に文字を「left」にすると画像も左に・・・