Làm cách nào để căn chỉnh văn bản trong một nút md-Vật liệu góc?

Question

Nếu không có quá nhiều tin nhắn với CSS của riêng tôi, có thuộc tính hoặc cấu hình nào tôi có thể sử dụng để căn chỉnh văn bản trong một số md-button được kéo dài một chút để vừa với menu không?

Đây là quan điểm hiện tại của tôi

<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

Sử dụng khoảng trống với flex như dưới đây. Bạn thậm chí có thể chỉ định giá trị cho flex để có được vị trí cụ thể hơn.

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

Hoặc nếu bạn chỉ muốn sắp xếp văn bản bên trong một nút, hãy thử này:

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

Answer 2

Bạn có thể làm điều này nếu sử dụng trong phạm vi md-thanh công cụ (góc 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> 

HOẶC

<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 của bạn nếu không có phong cách trong HTML:

.spacing { 
    flex: 1 1 auto; 
} 

Hope this helps một ai đó.