在angularjs html中将图像对齐到左边

Question

您可以看到图片中的行。

这是该视图的代码：

<div layout="row" layout-align="space-around center" >
<product-image-thumbnail layout="row" layout-align="left center"
    src="vm.callFunction(field)"
    setter="vm.callFunction(value)" />

<md-button  ng-click="vm.onMouseOver(field.getSrc))" layout="row" layout-align="right center">
    <md-icon>zoom_in</md-icon>
</md-button>
</div>

我想将图像或uploadanimage对齐到左边，将缩放按钮对齐。

但它不起作用。

我也试过

layout-align="start start
 layout-align="end end"

但它没有完成这项工作。

此外，我尝试按钮转换为column，但它是相同的。

如果我不放第一个布局，它会生成两行。我需要它们在一排。

这是src图像来的地方

<div ng-show="!vm.src" layout="row">
    <md-button class="md-button md-ink-ripple" ng-click="vm.Dialog($event)">
        <md-icon>file_upload</md-icon>
        <span translate>upload_image</span>
    </md-button>
</div>
<div ng-show="vm.src" class="thumbnail" layout="column" layout-align="center center" flex layout-padding ng-click="vm.Dialog($event)">
    <img src="{{vm.src}}" style="max-height: 60px;max-width: 60px"
         error-src="content/images/no_image_icon.gif"
    />
</div>

Answer 1

＆＃13;

＆＃13;

<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="left"> This is some text.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果要使用角度材质，请尝试使用间隔参数。 Example Plunker.

<div><!-- shouldn't need layout here-->
    <img layout="row" layout-align="space-between center"  />
    <button layout="row" layout-align="space-between center">Zoom</button>
</div>

Answer 3

你可以这样试试，

<section layout="row" layout-align="end center" layout-wrap>
    <div layout="row" layout-align="start center" flex>
      <img src="https://echtemaaltijd.blob.core.windows.net/image/image_671ed3d3-0c1e-43d5-9e9a-86247556fd00" class="md-card-image" alt="Washed Out">
      <span flex></span>
    </div>
    <md-button class="md-warn">Type</md-button>
  </section>

DEMO

Answer 4

尝试使用flex！

<div layout="row" layout-alignment="stretch">
    <product-image-thumbnail flex
        src="vm.callFunction(field)"
        setter="vm.callFunction(value)" />

    <md-button  ng-click="vm.onMouseOver(field.getSrc))" flex="5">
        <md-icon>zoom_in</md-icon>
    </md-button>
</div>

flex将占用尽可能多的空间，直到95％的可用宽度，flex=5将确保它为5 $