изображение и текст все в одной строке

Question

Эй, ребята, у меня есть страница here:

, где я хочу, чтобы пометка на h3, чтобы быть в одной совершенной линии:

<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 = «влево» чтобы это произошло и работали с дополнением-снизу, но никакого эффекта.

Любая идея, как поместить их в одну линию, как это совершенно ??:

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 +). Вам просто нужно префикс соответственно с -moz и т.д.

JSFiddle (не включает в себя WebFonts): https://jsfiddle.net/6q7tLucn/

Answer 2

Вы можете использовать vertical-align для изображения

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

Answer 3

Ну ... Я посмотрел на HTML, и похоже, что ваш <img /> находится внутри тега <p>.

Одна вещь, которую вы можете сделать, это дать <p> тег и <h3> тег класс «инлайн-insertwhateverhere», а затем дать этому классу следующее правило:

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

Тогда вы можете играть с запасом, padding, может быть, беспорядок с высотой, чтобы он выглядел так, как вам хочется. Вы можете в конечном итоге указать тег <p> и теги отдельного класса <h3>, такие как «ca-flag» и «country-name», а затем заменить .inline-elements на .ca-flag, .country-name, чтобы вы могли более точно настроить каждый элемент.

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; 
    }