与layout-align对齐

Question

我有按钮（达到涟漪效果），有图像，然后是文字。

我想要按钮的全宽，它们是左边的图像和文字，但它们的中心对齐如下所示：

这就是我尝试的内容，但它似乎layout-align并不适用于按钮，但肯定应该如此？

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

有没有更好的方法来实现这一目标？

Answer 1

材料有md-list＆amp; md-cards似乎是更好的选择。你可以选择一个你喜欢的。

1。） md-list （似乎与你的问题一致）。

public class LauncherActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_launcher);
        loadPersonalDatas();

        Thread time = new Thread() {
            public void run() {
                try {
                    sleep(20000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };
        time.start();
    }
    void loadPersonalDatas(){
        new Thread() {
            public void run() {
                try {
                    sleep(500);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }.start();
        Intent intent = new Intent(this, LoginActivity.class);
        startActivity(intent);
    }
    @Override
    protected void onPause() {
        super.onPause();
        finish();
    }
}

2。） md-cards

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