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="サンプルテキスト">>
</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="サンプルテキスト">>
</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で実現したいと思っているのですが、どうもやり方が見つかりません。
皆様ならどうやって実現するでしょうか?