如何在離子3中並排對齊標題，輸入框和離子圖標

Question

到目前爲止，我已經能夠弄清楚如何左對齊標題和右對齊圖標，但問題在於輸入框位於中心我無法弄清楚。

預期輸出圖像如下。

我的主頁代碼：

<ion-header> 

    <ion-navbar>  
     <ion-title text-center>Page Title</ion-title> 

    <ion-buttons end> 
     <button ion-button icon-only>   
      <ion-icon name="search"></ion-icon> 
     </button> 
    </ion-buttons> 

    </ion-navbar> 

</ion-header> 

<ion-content padding>  

</ion-content> 

Answer 1

只是固定它在我自己的！

首頁HTML文件

<ion-header> 

    <ion-navbar> 
    <ion-title>Title 
     <ion-input type="text"></ion-input> 
    </ion-title> 
    <ion-buttons end> 
     <button ion-button icon-only>   
      <ion-icon name="search"></ion-icon> 
     </button> 
    </ion-buttons> 

    </ion-navbar> 

</ion-header> 


<ion-content padding> 


</ion-content> 

Variable.scss文件

$text-input-md-margin-top: 0px; 
$text-input-md-margin-bottom: 0px; 
$text-input-md-margin-start: 0px; 
$text-input-md-margin-end: 0px; 

Home.scss文件

ion-input 
{ 
    background-color: white; 
    border-radius: 5px;  
    display: inline; 
    color: black; 
    margin-left: 0.5em; 
} 

.text-input-md 
{ 
    width: 60%;  
}