QA@IT
«回答へ戻る

コメントで指摘を受けて、治してみましたー

64
 </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行の段組になったはずです。
+画像もテキストも行の真ん中にきてますね。
+
 以上です。

自己解決しました。
こちらのサイトを参考にしました。
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行の段組になったはずです。
画像もテキストも行の真ん中にきてますね。

以上です。

自己解決しました。
こちらのサイトを参考にしました。
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行の段組になったはずです。
画像もテキストも行の真ん中にきてますね。

以上です。

回答を投稿

自己解決しました。
こちらのサイトを参考にしました。
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>

以上です。

自己解決しました。
こちらのサイトを参考にしました。
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>
```

以上です。