как я могу выровнять позитрон значка в ионном каркасе, и ему тоже нужно реагировать

Question

Как я могу выровнять значок до положения правого угла.

, но он также должен быть отзывчивым.

Я попытался использовать заголовок в ионном, но правильное выравнивание не работает должным образом.

<div class="bar bar-header" style="background-color:silver;"> 
    <span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span> 
    <span class="title margin-align"> 
    <img src="logo.img" style="width:45px;height:45px;"></img> 
    </span> 
    <i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i> 
</div> 

Answer 1

По правому углу, вы хотите, чтобы он находился на правом углу панели заголовка?

Если это так, любая кнопка/тег после h1 div будет размещена с правой стороны.

<div class="bar bar-header"> 
    <button class="button icon ion-navicon"></button> 
    <h1 class="title">Header Buttons</h1> 
    <button class="button">Edit</button> 
</div> 

Если нет, можете ли вы предоставить код, чтобы я мог посмотреть?

Answer 2

Вы можете попробовать это с position: absolute на изображении. Что-то вроде этого:

<div class="bar bar-header" style="background-color:silver; position:relative"> 
    <span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span> 
    <span class="title margin-align" style="position:absolute; right: 10px; top: 5px;"> 
    <img src="logo.img" style="width:45px;height:45px;"></img> 
    </span> 
    <i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i> 
</div> 

Вы также можете использовать float: right:

<div class="bar bar-header" style="background-color:silver;"> 
    <span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span> 
    <span class="title margin-align" style="float:right"> 
    <img src="logo.img" style="width:45px;height:45px;"></img> 
    </span> 
    <i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i> 
</div> 

Я предполагаю, что это может решить проблему права выравнивая изображение вместе с адаптивным дизайном.