QA@IT

bootstrapを使った段組みの中で、画像とテキストを横並びにして縦位置を揃えたい

30884 PV

bootstrapを使ってデザインの練習をしています。

jQuery JavaScript Library v1.11.1
Bootstrap v3.2.0
を使用しています。
ブラウザは、chromeの64bit版の38.0.2125.111を使用しています。

以下のようなHTMLを書いて表示してみたのですが、思うようにいきません。
やりたいのは、imgタグの画像と、「画像の右側テキスト:」の両方が、1行の真ん中の高さに揃う事です。

    <hr style="margin-top:0px;margin-bottom:0px;">
    <div class="row" style="margin-left: auto;margin-right: auto;height:90px">
        <div class="col-md-4">
            <img src="./img/sample_img.png" style="vertical-align: middle;height: 37px;width: 23px;">
            画像の右側テキスト:
        </div>
        <div class="col-md-8">
            <input class="" type="text" value="サンプルテキスト">&gt;
        </div>
    </div>
    <hr style="margin-top:0px;margin-bottom:0px;">
    <div class="row" style="margin-left: auto;margin-right: auto;height:90px">
        <div class="col-md-4">
            <img src="./img/sample_img.png" style="vertical-align: middle;height: 37px;width: 23px;">
            画像の右側テキスト:
        </div>
        <div class="col-md-8">
            <input class="" type="text" value="サンプルテキスト">&gt;
        </div>
    </div>
    <hr style="margin-top:0px;margin-bottom:0px;">

画像の右側にあるテキストの縦位置は、このサイトを参考にしてみました。
http://www.tagindex.com/stylesheet/img/vertical_align.html

しかし、画像を縦の位置の決め方がわかりません。
bootstrapでは、横の位置をそろえるサンプルは沢山あるのですが、縦の位置をそろえるサンプルがあまりありません。
どなたか良いやり方をご存じないでしょうか?

bootstrapはこちらを参考につかっています。
http://blog.notsobad.jp/post/78290209871/bootstrap
http://c.hrgrweb.com/bootstrap3/css.html

出来れば、bootstrapで実現したいと思っているのですが、どうもやり方が見つかりません。
皆様ならどうやって実現するでしょうか?

  • 前にもお願いしたと思いますが、少なくとも、使っている jQuery, Bootstrap のバージョン、ブラウザが何かぐらい書きませんか? -
  • そうでした。失礼しました。
    jQueryとbootstrapのバージョンを追記しました。
    -
  • アップされたソースのような div 要素を使うのは止めて、table, tr, td 要素を使って、それに vertical-align プロパティを適用するというのではダメなんですか? (vertical-align が適用できるのは基本的にインライン要素とテーブルセルだけなので) -
  • bootstrapの他の機能を使う事が出来なくなるので、bootstrapの機能を使用してレイアウトを作成する必要があります。
    また、tableタグはレイアウトを整えるために使うのは適切ではありません。
    -
  • 質問にアップされたコードで「bootstrapの機能」というのは具体的にどれを言ってますか? また、table タグはどこが適切ではないのですか? (適材適所という言葉がありますよね。table タグでガチガチにページ全体の段組するのは時代遅れですが、今回のようなケースで適切ではないとは思えませんが) -
  • 質問に回答します。
    アップしたコードは質問するために作成したもので実際に使用するものではありません。
    tableタグをレイアウトに使用しない理由を一言で言うと「仕事だから」になっちゃいます。
    他の機能との統一姓が取れないですし、そもそもソースレビュー受けたら一発で落ちます。技術的な面での理由はもうご存知でしょう。
    -
  • 「仕事だから」と言われても質問者さんの「仕事」を知らない自分には何のことだか分かりません。想像するに Bootstrap CSS の Grid system ( http://getbootstrap.com/css/#grid ) の機能を使うことが必須条件だからということのように思えますが、そうなんですか? それならそのように最初に書いていただけると理解力の乏しい私にも分かるのですが・・・ -
  • あの、普通に仕事している上でレイアウトにテーブルを使う事が許される事ってほぼ無いと思います。仕事柄話せない事もありますし、細かいこと言えないです。
    Bootstrapの機能はいくつ聞きたいですか?Bootstrapを使わないことが出来なくてレイアウトにtableを使う事が業務上出来ないからだと言えば伝わりますか?
    -

回答

自己解決しました。
こちらのサイトを参考にしました。
http://barktoimagine.com/web/css/1653

こんな感じのCSSを組みます。

.div_img_wrapper {
    height: 100%;
}

.div_img_wrapper:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

htmlは以下のように記載します。
class="row"のheightは、適宜変更してください。
重要なのは、imgタグを囲っているdivタグに、div_img_wrapperクラスを付与することです。
外側のdivにborderを使用しているのは、分かりやすくするためなので消しちゃっても大丈夫です。

<div class="row" style="height:90px;border:1px solid;">
    <div class="col-md-4 div_img_wrapper">
        <img src="./img/40x40_itimatsu.png">
    </div>
    <div class="col-md-8">
        説明;
    </div>
</div>

↑↑指摘を受けて気づいたんですが、これだけだと画像の上下位置を調整しただけで、片手落ちでした。失礼しました。

    <hr style="margin-top:0px;margin-bottom:0px;">

    <div class="row border-simple" style="height:90px">
        <div class="col-md-4" style="height:100%;">
            <div class="row border-simple" style="height:100%;">
                <div class="col-md-4 div_img_wrapper">
                <img src="./img/sample_img.png">
                </div>
                <div class="col-md-7 div_img_wrapper">
                画像の右側テキスト:
                </div>
                <div class="col-md-1">
                </div>
            </div>
        </div>
        <div class="col-md-8 div_img_wrapper">
            <input class="" type="text" value="サンプルテキスト">&gt;
        </div>
    </div>

    <hr style="margin-top:0px;margin-bottom:0px;">

    <div class="row border-simple" style="height:90px">
        <div class="col-md-4" style="height:100%;">
            <div class="row border-simple" style="height:100%;">
                <div class="col-md-4 div_img_wrapper">
                    <img src="./img/sample_img.png">
                </div>
                <div class="col-md-7 div_img_wrapper">
                    画像の右側テキスト:
                </div>
                <div class="col-md-1">
                </div>
            </div>
        </div>
        <div class="col-md-8 div_img_wrapper">
            <input class="" type="text" value="サンプルテキスト">&gt;
        </div>
    </div>

    <hr style="margin-top:0px;margin-bottom:0px;">

これで、3列2行の段組になったはずです。
画像もテキストも行の真ん中にきてますね。

以上です。

編集 履歴 (1)
  • ブラウザの画面の幅を縮めたときも期待する結果になるんですか? -
  • 試してみてはいかがでしょうか? -
  • 最初の質問にあったように行を 2 つ作ってやってみてください。上の行の「説明」のセルが、下の行の img のセルに重なってしまいませんか? -
  • 確かに最初の投稿と全然違っちゃってて、これだと片手落ちでしたね。治してみました。 -
  • 「ブラウザの画面の幅を縮めたときも期待する結果になるんですか?」というのは、ブラウザの横幅を縮めていって 768px 未満になった時、col-md-* とした div 要素がきちんと積み上げられて表示されますか・・・という意味です。ならないはずですけど。 -
  • あと、ブラウザの画面の幅が十分広くて、col-md-* とした div 要素が横に並ぶ場合でも、例えばテキストボックスに代えて、一行で表示できない長い文字列を入れた場合、表示が崩れるはずです。上記を「ベストアンサー」にするのは早計ではないですか? -
  • それから、hr 要素を使って列を分けるというのは、あまりに対症療法的な策だと思いますよ。本来使わなくて済むようになっているのに、そのようなものを使わざるを得ないというのは、少なくとも普通ではないです。先に紹介したページ http://getbootstrap.com/css/#grid は読まれたでしょうか? -
  • ブラウザの横幅を縮めていった時に、積み上げられて表示されるべきか、横幅を維持すべきかという判断は今のところ出来ません。ので、この点は考慮してません。
    テキストボックスの長さがどれくらいになるかは今のところ解りませんし限定する権限がありませんので、この点は考慮していません。
    hrを使って列を分けるというのは、適切ではないでしょう。本来は必要無いですので削除する予定です。
    -
  • ブラウザの表示幅に応じて表示が変わるというのが Grid System のウリなのに、その点を考慮してないというのは理解に苦しみます。よく理解しないまま質問したのでしょうか? 紹介したページをよく読んでいただきたいと思います。日本語のサイトでは http://www.atmarkit.co.jp/ait/articles/1403/19/news034_2.html が参考になると思います。 -
  • クラスのプレフィックスの説明についてはこちらの方が解りやすいです。
    http://qiita.com/opengl-8080/items/2764b6db143b1a4411f6

    理解に苦しむって何がですか?考慮するって何をどう考慮するのですか?ブラウザの幅が小さくなったときにどうなるのが適切であるかを決めるのは貴方ではありません。私でも無いのです。
    -
  • 「よく理解しないまま質問したのでしょうか?」という発言の意図はなんですか?それの回答は何にどう影響しますか? -
  • はっきり言って貴方は他人の意図をくみ取ろうとする努力が無く、自分の土俵に相手を取り込んで叩こうとしているように見えます。自分の発言が他の人と比べていかに無駄が多いかを比べて見てください。 -
  • 私の質問「質問にアップされたコードで「bootstrapの機能」というのは具体的にどれを言ってますか?」にあなたが明確に答えられなかったというところにそもそもの問題があると認識ください。 -
  • 貴方は私の質問にまったく答えず無視している立場なのによくそんな事言えますね。 -
  • 掲示板で質問するなら、自分のやりたいことを、掲示板に書いてあること意外なにも知り得ない第三者に、具体的かつ明確に伝えるためのスキルが必要です。例えば、上のことを聞かれたときに、画面の幅が小さくなった時にどうなるべきかを伝えるのもスキルの一つです。そのあたりをよく考えていただければと思います。 -
  • 「画面の幅が小さくなった時にどうなるべきか」は質問にありません。hrの話も質問にありません。必要であるという根拠はなんでしょうか?貴方の中の常識を他人に押し付けていませんか?
    -
  • 画面の幅が小さいデバイスで表示した時、表示が崩れて読めなくなってしまうのは NG というのは世間一般の常識。そういうのは考えないというのは世間一般では常識外。それがあなたの常識というならこれ以上は議論しても時間の無駄。 -
  • 「表示が崩れて読めなくなってしまうのはNG」ってのは常識ですが、じゃあどう対処するかを決める権限を私は持ってないんです。だから「判断は今のところ出来ません」って言ったじゃないですか。どーすりゃいいのよ。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。