Jak mogę pozostawić wyrównanie tekstu w rozciągniętym md-guście Materiał kątowy?

Question

Bez zbytniego majsterkowania z moim własnym CSS, czy istnieje atrybut lub konfiguracja, której mogę użyć, aby wyrównać tekst w pliku md-button, który jest nieco rozciągnięty, aby pasował np. Do menu?

To jest mój aktualny widok

<md-sidenav md-is-locked-open="$mdMedia('gt-md')" layout="column"> 
    <md-toolbar> 
    <h1 class="md-toolbar-tools"> 
     <a ng-href="/" layout="row" href="/"> 
     <div class="docs-logotype">Material Design</div> 
     </a> 
    </h1> 
    </md-toolbar> 
    <md-content flex role="navigation" layout="column"> 
    <md-button>Button1</md-button> 
    <md-button>Button2</md-button> 
    </md-content> 
</md-sidenav> 

<md-content flex layout="column"> 
    <md-toolbar> 
    <div class="md-toolbar-tools"> 
     <button class="md-icon-button md-button" aria-label="Settings"> 
     <md-icon md-svg-icon="images/icons/menu.svg" aria-hidden="true"></md-icon> 
     <div class="md-ripple-container"></div> 
     </button> 
     <md-button>Button1</md-button> <!-- how to left align this text inside a stretched button --> 
     <md-button>Button2</md-button> 
     <span flex=""></span> 
     <md-button>Right side button</md-button> 
     <button class="md-icon-button md-button" aria-label="More"> 
     <md-icon md-svg-icon="images/icons/more_vert.svg" aria-hidden="true"></md-icon> 
     <div class="md-ripple-container"></div> 
     </button> 
    </div> 
    </md-toolbar> 
    <md-content flex> 
    Some content !! 
    </md-content> 
</md-content> 

Answer 1

Zastosowanie pusty przęsło z taśmą jak poniżej. Możesz nawet określić wartość flex, aby uzyskać bardziej szczegółową lokalizację.

<div layout="row" layout-align="start center" flex> 
    <md-button>button 1 </md-button> 
    <span flex></span> 
</div> 

Lub jeśli po prostu chcesz wyrównać tekst wewnątrz przycisku, spróbuj tego:

<md-button style="text-align:left">button </md-button> 

Answer 2

Można to zrobić w przypadku korzystania w ciągu MD-pasku narzędzi (kątowe 4):

Html

<md-toolbar id="toolbar" color="primary" > 
    <md-button>button 1 </md-button> 
    <span class="spacing"></span> 
    <md-button>button 2 </md-button> 
</md-toolbar> 

LUB

<md-toolbar id="toolbar" color="primary"> 
    <md-button>button 1 </md-button> 
    <span style="flex: 1 1 auto;"></span> 
    <md-button>button 2 </md-button> 
</md-toolbar> 

Twój CSS jeśli nie stylizacji w HTML:

.spacing { 
    flex: 1 1 auto; 
} 

Nadzieja to pomaga kogoś.