コメントで指摘を受けて、治してみましたー
</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="サンプルテキスト">>
+ </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="サンプルテキスト">>
+ </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="サンプルテキスト">>
</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="サンプルテキスト">>
</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="サンプルテキスト">> </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="サンプルテキスト">> </div> </div> <hr style="margin-top:0px;margin-bottom:0px;"> ``` これで、3列2行の段組になったはずです。 画像もテキストも行の真ん中にきてますね。 以上です。