画像とテキストはすべて1行

Question

でやあみんな、私はページhere持っ

<h3>CONTACT MY AGENT</h3> 

<img src="http://gringlishgirl.com/test/wp-content/uploads/2016/11/canada.png" align="left" /> 

<h3 style="font-size: 20px; padding-bottom: 5px;">CANADA</h3> 

<strong>Film Comm Talent &amp; Model Agency</strong> 
http://filmcomm.ca/ 
Hudson’s Bay Centre 
Bloor Street East. Suite 3500 
Toronto, ON M4W 1A8 
phone: 416-915-3103 
email: agents@filmcomm.ca 

を私は=「左」ALIGNを使用それが起こるようにして、パディング - ボトムで動作しますが効果はありません。

どのようにこの完璧??のように1行にそれらを置くために、任意のアイデア：あなたがさて...私は見た画像

img.your_class { 
    vertical-align:-2px; 
} 

Answer 1

ような何か考えてみましょう：

<div class='canada-wrapper'> 
    <img src='http://gringlishgirl.com/test/wp-content/uploads/2016/11/canada.png'> 
    <h3>CANADA</h3> 
</div> 

を

そして、あなたのCSS：

.canada-wrapper { 
    // keep absolute positioning of the image within the wrapper 
    position: relative; 
} 

.canada-wrapper img { 
    // position 50% from the top, and offset by -50% using transforms 
    left: 0; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
} 

.canada-wrapper h3 { 
    // push the text to the right of the image 
    // (fine tune as desired) 
    margin-left: 48px; 
} 

魔法がここに完全に画像を垂直方向に整列させるtransform: translateY、である - に関係なく、その横にテキストのサイズの。それは驚くほど良いcross-browser support（現代のブラウザとIE9 +）があります。 https://jsfiddle.net/6q7tLucn/

Answer 2

HTMLの場合、<img />は<p>タグの内部にあるようです。 、

.inline-elements { 
    display: inline-block; 
    margin: 0; 
    padding: 0; /* just in case; remove if unneeded */ 
    vertical-align: middle; 
} 

は、その後、あなたが余裕で再生することができます：あなたが行うことができます

ことの一つは、<p>タグと<h3>タグに「インラインinsertwhateverhere」のクラスを与えると、そのクラスに次のルールを与えることですあなたが望むようにそれを見えるようにするために高さを混乱させるかもしれない。あなたは<p>タグと<h3>タグに "ca-flag"や "country-name"のような別のクラス名を付けて、 .inline-elementsを.ca-flag, .country-nameに置き換えて、各要素をより具体的にカスタマイズすることができます。

Answer 3

ためvertical-alignを使用することができます

Answer 4

画像タグにfloat:leftを追加するだけでもかまいません。

HTML

<div> 
    <img src="http://gringlishgirl.com/test/wp-content/uploads/2016/11/canada.png" class="ClsImg"><h3>CANADA</h3> 
</div> 

CSS

.ClsImg{ 
    float:left; 
} 

FIDDLE

Answer 5

以下のスタイル

.wpb_wrapper p + p{ 
    clear: both; 
    } 
    .wpb_wrapper h3 + p { 
    clear: both; 
     float: left; 
     margin: 0 5px 0 0; 
    width: auto; 
    } 
    .wpb_wrapper h3 + p + h3, .wpb_wrapper h3 ~ p + h3 { 
     clear: none; 
     padding: 0; 
     line-height: 24px; 
    } 

を適用します。あなたはJSFiddleは（webfontsは含まれません）

など、 -mozに応じて接頭辞にだけ必要があります