Как я могу выровнять текст в растянутом md-кнопке с угловым материалом?

Question

Не слишком много переделывать с помощью собственного CSS. Есть ли атрибут или конфигурация, которые я могу использовать для выравнивания текста в md-button, который немного растянут, чтобы соответствовать меню?

Это мой текущий вид

<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

Используйте пустой пролет со шлейфом, как показано ниже. Вы можете даже указать значение flex, чтобы получить более конкретное местоположение.

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

Или если вы просто хотите, чтобы выровнять текст внутри кнопки, попробуйте следующее:

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

Answer 2

Вы можете сделать это при использовании в мкр-панели (Угловая 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> 

ИЛИ

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

Вашего CSS, если не стиль в HTML:

.spacing { 
    flex: 1 1 auto; 
} 

Надеется, что это не поможет кому-то.