Aligning with layout-align - angular-material

Question

I have buttons (to achieve ripple effect) which have an image, then text.
I want to the buttons full width, which they are and the images and text to start left, but they're center aligned as seen below:
This is what I'm trying but it's as if layout-align doesn't apply to buttons but surely it should?
<md-list role="list">
<md-item ng-repeat="x in courses" layout="column">
<a href="#" layout="column">
<md-button layout="row" layout-align="start center">
<img ng-src="/assets/course_images/{{x.image_name}}" class="course--image" fallback-src="/assets/img/intro-bg-lite.jpg">
{{x.course_name}}, {{x.course_address}}
</md-button>
</a>
</md-item>
</md-list>
CSS for image:
.course--image {
border-radius: 60px;
border: 1px solid #ddd;
margin: 4px 16px;
vertical-align: middle;
width: 60px;
height: 60px;
}
Is there a better way to achieve this?

Answer 1

Material has md-list & md-cards which seem to be better options. You can choose one you like.
1.) md-list (seems to go with yr problem).
<md-list role="list">
<md-list-item ng-repeat="x in courses">
<img ng-src="/assets/course_images/{{x.image_name}}" class="md-avatar" fallback-src="/assets/img/intro-bg-lite.jpg" ng-click=''>
<div class="md-list-item-text">
<md-button class="md-primary" ng-click="">
{{x.course_name}}, {{x.course_address}}
</md-button>
</div>
<md-divider ng-hide='$last'></md-divider>
</md-list-item>
</md-list>
2.) md-cards
<md-content>
<md-card ng-repeat="x in courses">
<md-card-content layout="row" layout-align="start center" layout-padding>
<img ng-src="/assets/course_images/{{x.image_name}}"
class="md-avatar" alt=""
ng-click=''>
<md-button class="md-primary" ng-click=''>
{{x.course_name}}, {{x.course_address}}
</md-button>
</md-card-content>
</md-card>
</md-content>