Отображать встроенное изображение с помощью Ionic

Question

Я разрабатываю небольшое мобильное приложение с использованием Ionic и изо всех сил пытаюсь отобразить изображение в строке с текстом.

  <ion-view title="Beer"> 
       <ion-content class="has-header"> 
        <div class="row"> 
         <div class="col text-center"> 
           <h2>Brooklyn</h2> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col col-40"> 
           <p style="text-align: right;"><b>Country:</b></p> 
         </div> 
         <div class="col" > 
           <p style="text-align: left;"><img ng-src="img/flags-mini/us.png" /> United States</p> 
         </div> 
        </div> 
       </ion-content> 
      </ion-view> 

Как я очень неопытный с CSS я с трудом, чтобы показать флаг Соединенных Штатов и имеют < р> Содержание вертикально централизованы. Как это теперь текст отображается в нижней части строки, а не в центре:

Я пробовал разные вещи: настраивая < DIV> 's, чтобы определить стили инлайн CSS, чтобы попытаться немного переместите текст, переместив флаг в отдельный столбец, определив поля и т. д. Ничего не получилось.

Кто-нибудь знает, как их выровнять?

Answer 1

Вот один из способов, как вы можете это сделать:

<ion-view title="Beer"> 
    <ion-content class="has-header"> 
     <div class="row"> 
      <div class="col text-center"> 
        <h2>Brooklyn</h2> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col col-40"> 
        <p style="text-align: right;"><b>Country:</b></p> 
      </div> 
      <div class="col" > 
        <img ng-src="img/flags-mini/us.png" style="float:left; margin-right: 5px;"/> 
        <p style="text-align: left;"> United States</p> 
      </div> 
     </div> 
    </ion-content> 
</ion-view> 

Итак, что же мне делать? Я взял тэг img из тега p и добавил к этому изображению правила CSS float:left; margin-right: 5px;. Отдых остается нетронутым.

Вы можете увидеть пример, работающий на Codepen: http://codepen.io/anon/pen/JGwNqM