將圖像對齊到angularjs中的左側html

這是鑑於代碼：

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

來源

2016-11-13 mark

你（第二行）'...佈局-ALIGN = 「左中心」。可能值得只嘗試'... layout-align =「left」'。 – FDavidov

我只是試過，我希望它的工作，但沒有:( – mark

什麼是產品圖像？指令？ – Sajeetharan

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

來源

2016-11-13 15:25:26

如果你想使用角材，請嘗試使用空間之間PARAM。 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>

來源

2016-11-13 15:34:50

它使兩行，如果我不放第一個佈局。 – mark

你可以試試這個方法，

<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

來源

2016-11-13 15:48:23 Sajeetharan

試試和柔性！

<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

來源

2016-11-14 19:16:07 joyBlanks

將圖像對齊到angularjs中的左側html

回答

相關問題