Vaadin 8.2.0：如何垂直對齊網格單元格中的圖像

Question

我想在網格中顯示縮略圖圖像。

這是我的相關代碼（簡化）：

addColumnVisibilityChangeListener(event -> { 
    if (ID_THUMBNAIL.equals(event.getColumn().getId())) { 
     if (event.isHidden()) { 
      setBodyRowHeight(-1); 
     } else { 
      setBodyRowHeight(130); 
     } 
     // needed to force rendering of current values 
     getDataProvider().refreshAll(); 
    } 
}); 
// rescale returns a (cached) ExternalResource, image is 120x120px max 
// aspect ratio is preserved, so at least width or height is 120px 
grid.addColumn(this::rescale, new ImageRenderer<>(this::showImage)) 
    .setCaption(ID_THUMBNAIL) 
    .setStyleGenerator(r -> ID_THUMBNAIL) 
    .setWidth(131); 

的CSS是：

.asset-grid td.thumbnail { 
    // height is set bij Vaadin Grid 
    padding: 5px; 
    text-align: center !important;  
} 
.asset-grid td.thumbnail img { 
    vertical-align: middle !important; 
} 

一切正常，除了縮略圖的垂直對齊方式。它顯示在單元格的頂部。我嘗試了幾個設置，但沒有任何工作。

Answer 1

這主要基於this answer on how to vertical-align image in div，並通過試驗和錯誤進行了一些細微的變化。

可以使用原始答案與fixed line-size（例如130）和vertical-align: middle，但更新後的版本提供了靈活性，無論您設置了多大的高度（在Chrome和邊緣進行測試）。

代碼：

import com.vaadin.event.ShortcutAction; 
import com.vaadin.server.ExternalResource; 
import com.vaadin.server.Resource; 
import com.vaadin.ui.*; 
import com.vaadin.ui.renderers.ClickableRenderer; 
import com.vaadin.ui.renderers.ImageRenderer; 

public class GridWithImages extends VerticalLayout { 

    public GridWithImages() { 
     // basic grid setup 
     Grid<User> grid = new Grid<>(); 
     grid.addColumn(User::getId) 
      .setCaption("Id"); 
     Grid.Column<User, Resource> thumbnailColumn = grid.addColumn(User::getThumbnail) 
                  .setCaption("Thumbnail") 
                  .setRenderer(new ImageRenderer<>(this::showImage)) 
                  .setStyleGenerator(r -> "thumbnail") 
                  .setWidth(131); 
     grid.setItems(new User(1), new User(2), new User(3)); 
     grid.setBodyRowHeight(130); 

     // allow to easily update height and width for testing purposes 
     TextField rowHeightField = new TextField("Row height", "130"); 
     TextField thumbnailColumnWidthField = new TextField("Thumbnail width", "131"); 
     Button button = new Button("Update", event -> { 
      // NOT SAFE, NOT ELEGANT, but for the sake of brevity just use those values... 
      grid.setBodyRowHeight(Integer.valueOf(rowHeightField.getValue())); 
      thumbnailColumn.setWidth(Integer.valueOf(thumbnailColumnWidthField.getValue())); 
     }); 
     button.setClickShortcut(ShortcutAction.KeyCode.ENTER); 

     addComponents(grid, rowHeightField, thumbnailColumnWidthField, button); 
    } 

    // image renderer click handler 
    private void showImage(ClickableRenderer.RendererClickEvent<User> event) { 
     Notification.show("This will be the actual image in full size... maybe, maybe not!"); 
    } 

    // basic bean for easy binding 
    private class User { 
     private int id; 
     private Resource thumbnail = new ExternalResource("https://www.gravatar.com/avatar/d9269818df2a058ad6bf9dbbaf1e8240?s=32&d=identicon&r=PG"); 

     public User(int id) { 
      this.id = id; 
     } 

     public int getId() { 
      return id; 
     } 

     public void setId(int id) { 
      this.id = id; 
     } 

     public Resource getThumbnail() { 
      return thumbnail; 
     } 

     public void setThumbnail(Resource thumbnail) { 
      this.thumbnail = thumbnail; 
     } 
    } 
} 

主題：

td.v-grid-cell.thumbnail > img { 
    vertical-align: unset; // leaving it centered as inherited, shifts the image a few pixels downwards 
    position: relative; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); // https://stackoverflow.com/questions/34551381/is-the-css3-transform-translate-percentage-values-relative-to-its-width-and-or-h 
} 

結果：