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

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

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

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

CSS

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

Q&A

解決済

1回答

1574閲覧

和の縦書きサイトを作ったのですが、和食という画像が左右真ん中に来ません。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

CSS

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

0グッド

0クリップ

投稿2016/10/23 09:52

編集2016/10/23 13:29

和の縦書きサイトを作ったのですが、和食という画像が左右真ん中に来ません。

http://codepen.io/anon/pen/kkRPPP

/* Fluid-image /
img {
max-width: 100%;
height: auto;
vertical-align: bottom;/
imgの下に隙間があかないようにする */
}

vertical-align: bottom;を削除したり
この直下にmiddleを入れると真ん中に来ます。
しかし他も影響するので、i㎎以外のところで、何とかしないと関係ないところまで影響を受けます。

もちろん下記のようにもしてみましたが、それでも上記でないと中央ぞろえになりません?
img.firefox-va-m {
vertical-align: middle !important;
}

縦ぞろえなのでvertical-aline:bottom;が下ではなく左右のどちらかになっているので左ぞろえなどになってしまっているのでしょうか?

インスペクタ上で下記のようにいろいろつけてもダメでした。
element.style {
vertical-align: middle;
margin: auto;
text-align: center;
}

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

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

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

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

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

gin

2016/10/23 10:24

画像はダミーでも入れて画像がある状態にしてはどうでしょう?画像が切れているのでFFもGCも同じに見えます。
退会済みユーザー

退会済みユーザー

2016/10/23 12:32

確かにそうなんですが、どのように画像を入れるか調べてみます。
退会済みユーザー

退会済みユーザー

2016/10/23 12:39

<img src="http://webfeelfree.com/sample/img/img_2014030501.jpg" width="180" height="150" /></a>のように、WEB上に画像をアップロードしてフルパスで指定すればよいのでしょうか?このためにレンサバを借りないといけないのですかね。簡単にダミーの画像を入れる方法をご存じないでしょうか?
退会済みユーザー

退会済みユーザー

2016/10/23 13:21

ありがとうごさいます。確かにこちらでできたのですがcodepen上ではなぜかすべて左側に来ています。ちょっと理由がわかりません。http://codepen.io/anon/pen/kkRPPP
退会済みユーザー

退会済みユーザー

2016/10/23 13:27

それでは左揃えになっている2番目の縦長の画像を左右中央にする方法を教えていただければ幸いですと変更させてください。
guest

回答1

0

ベストアンサー

imgについてるvertical-align: bottom;を取ればffとGCは真ん中に来るようです。
IEはサンプルで崩れてたのでそれ以上は見てません。

投稿2016/10/24 02:24

gin

総合スコア2722

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

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

退会済みユーザー

退会済みユーザー

2016/10/24 02:29

そうなんです。それをとると中央ぞろえになるのです。 それなので、詳細度で負けないように下記のようにしたのですが、 それでも上記を削除するしか中央に来ません。 img.firefox-va-m { vertical-align: middle !important; }
gin

2016/10/24 02:42

「vertical-align: middle !important;」は効いています。 単純にロゴの「vertical-align: bottom;」でベースがずれてる(?)んじゃないですかね。 テキストも一緒に入れると分かりますが文字のベースラインが動きます。
退会済みユーザー

退会済みユーザー

2016/10/24 03:45

ありがとうごさいます。 http://codepen.io/anon/pen/kkRPPP のようにテキストを入れてみましたが、画像と同じ位置にあるように見えます? <img class="c-logo c-logo--small u-ta-l" alt="ロゴ" src="http://placehold.jp/250x50.png" /> がずれていてその下の <img class="firefox-va-m c-corporate-name" alt="和食" src="http://placehold.jp/10x150.png" />あああ はちゃんと中央に来ているということでよいでしょうか?
gin

2016/10/24 03:52

「vertical-align: middle !important;」も取ってみてください~
gin

2016/10/24 04:10

「vertical-align」全部コメントアウトしないと意味ないです。<上位のをコメントアウトしたら下位のものが効くので
退会済みユーザー

退会済みユーザー

2016/10/24 05:19

確かに文字は中央に来ました。 http://codepen.io/anon/pen/kkRPPP ブロック用になっているかと思い下記のようにインライン要素しましたがそれでも中央に来ません。 <img class="inline  firefox-va-m c-corporate-name" alt="和食" src="http://placehold.jp/10x150.png" /> .inline { display:inline; } もう意味が分かりません、バグですかね。縦書きは本当に嫌になります。
gin

2016/10/24 06:26

いや、意味が分からないのはこちらです。 真ん中に来たのなら、なぜわざわざinlineをいれるんです? 真ん中に来たのは文字だけってことですか? ほかにCSSが効いているなら分かりませんが、さっきも書いたように「vertical-align」をすべて取り除けば画像も真ん中にきます。<codepenのはまだ1か所残ってます あとinlineの後ろは全角スペースになってます。
退会済みユーザー

退会済みユーザー

2016/10/24 07:34

いや、意味が分からないのはこちらです。 下記のvertical-align: bottom;を削除したり この直下にmiddleを入れると真ん中に来ます。 と初めに記載しています。 /* Fluid-image */ img { max-width: 100%; height: auto; vertical-align: bottom;/* imgの下に隙間があかないようにする */ }
退会済みユーザー

退会済みユーザー

2016/10/24 07:35

vertical-align: bottom;/* imgの下に隙間があかないようにする */ を消すとほかの画像も下ぞろえにならないのでこまるので、消すことができないので何とかしたいということです。
gin

2016/10/24 07:53 編集

さきほどからいっているようにロゴ画像に「vertical-align: bottom;」がついてるのでずれてます。 なので、全体に「vertical-align: bottom;」を残しておきたい場合は、ただ単純にロゴ画像に「vertical-align: middle;」などを指定すればいいと思うんですが、これをやってもダメだったってことですよね?
gin

2016/10/24 07:58

なんか早い話、これでいいってことですかね。 a img { vertical-align: middle; }
退会済みユーザー

退会済みユーザー

2016/10/24 09:10

そこが不思議なところなんです。 もちろん下記のようにもしてみましたが、それでも上記でないと中央ぞろえになりません? 下記をつければ詳細度で負けすに上書きできるはずなのになぜかできないのです。 POSTCSSをgulpで使っているので変な変換をしているのですかね。 img.firefox-va-m { vertical-align: middle !important; } !importantがあれば絶対にな!importantがないcssに負けるわけがないですよね。
gin

2016/10/24 09:18

? なんか話がループしてますが… ロゴに「.firefox-va-m」をつければ真ん中に来ますよね? つけるのが嫌ってことですか?
退会済みユーザー

退会済みユーザー

2016/10/24 09:27

それが、来なくて困っていたのですが、baseのほうにimg aとしたところなぜかできたようです。gulpの問題化よくわかりませんが、とりあえずできたようなのでBAにさせてもらいましたありがとうございます。理由は不明です?
退会済みユーザー

退会済みユーザー

2016/10/24 10:02

原因がわかりました。 <a href="http://index.html"> <img class="c-logo c-logo--small u-ta-l" alt="ロゴ" src="http://placehold.jp/250x50.png" /> <img class="inline  firefox-va-m c-corporate-name" alt="和食" src="http://placehold.jp/10x150.png" />あああ </a> 上記二つの画像の2つ目にだけvertical-align: middle !important;をつけていたので真ん中に来なかったようです。 ひとつめの画像にもつけたところ真ん中に来ました。 ただ親がaなので横幅の大きい初めのimgは親いっぱいなので必然的に中央に来るので不要と考えていたのですが、親要素いっぱいであれば真ん中に来ているのと一緒と考えてはいけないのでしょうか? そこが謎です。
gin

2016/10/24 10:17

その1つ目の画像であるロゴに「firefox-va-m」をつけたらダメなのか?と上で言ってますよね?? で、その横幅の大きいロゴ画像にvertical-alignがついてるので軸がずれるとも言ってます。
gin

2016/10/24 10:29

まあ、縦書きのときは何かしら画像のvertical-alignいじる場合は、その中ではできる限り合わせたほうがよさげですね。特に真ん中にする場合。
退会済みユーザー

退会済みユーザー

2016/10/24 10:29

>>> いや、意味が分からないのはこちらです。 下記のvertical-align: bottom;を削除したり この直下にmiddleを入れると真ん中に来ます。 と初めに記載しています。 /* Fluid-image */ img { max-width: 100%; height: auto; vertical-align: bottom;/* imgの下に隙間があかないようにする */ } お互いさま。 その横幅の大きいロゴ画像にvertical-align:bottom;がついているので、真ん中になっていないということですね。 仮に親要素ぴったりの横幅でも。
gin

2016/10/24 10:39

繰り返しになるので…もういいです。 あとは適宜判断してください。
退会済みユーザー

退会済みユーザー

2016/10/24 10:59

ロゴのベースがずれているのが原因で、その下の画像は中央に来ていたのに上が来ていないので下の画像が真ん中に来ていないように見えたということですかね。 つまり中央ぞろえにしたい場合は並んでいるすべての要素が中央に来ないと一つだけが来ても中央にならないということなのでしょうね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問