QA@IT
«質問へ戻る

ブラウザを追加しました。

64
本文
 jQuery JavaScript Library v1.11.1
 Bootstrap v3.2.0 
 を使用しています。
+ブラウザは、chromeの64bit版の38.0.2125.111を使用しています。
 
 以下のようなHTMLを書いて表示してみたのですが、思うようにいきません。
 やりたいのは、imgタグの画像と、「画像の右側テキスト:」の両方が、1行の真ん中の高さに揃う事です。

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

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で実現したいと思っているのですが、どうもやり方が見つかりません。
皆様ならどうやって実現するでしょうか?

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

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

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

``` sample.html
    <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のバージョンを追記しました。

64
本文
 bootstrapを使ってデザインの練習をしています。
+
+jQuery JavaScript Library v1.11.1
+Bootstrap v3.2.0 
+を使用しています。
+
 以下のようなHTMLを書いて表示してみたのですが、思うようにいきません。
 やりたいのは、imgタグの画像と、「画像の右側テキスト:」の両方が、1行の真ん中の高さに揃う事です。
 

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

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

jQuery JavaScript Library v1.11.1
Bootstrap v3.2.0
を使用しています。

以下のような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で実現したいと思っているのですが、どうもやり方が見つかりません。
皆様ならどうやって実現するでしょうか?

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

jQuery JavaScript Library v1.11.1
Bootstrap v3.2.0 
を使用しています。

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

``` sample.html
    <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で実現したいと思っているのですが、どうもやり方が見つかりません。
皆様ならどうやって実現するでしょうか?

質問を投稿

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

bootstrapを使ってデザインの練習をしています。
以下のような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で実現したいと思っているのですが、どうもやり方が見つかりません。
皆様ならどうやって実現するでしょうか?

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

``` sample.html
    <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で実現したいと思っているのですが、どうもやり方が見つかりません。
皆様ならどうやって実現するでしょうか?