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

除了缩略图的垂直对齐之外，一切都正常。它显示在单元格的顶部。我尝试了几个设置，但都没有用。

- rmuller

---

你尝试过在 .asset-grid td.thumbnail 中添加 "display: table-cell;" 吗？ - 1011sophie

刚试了一下，没有任何区别。 - rmuller

我有几个可行的解决方案，但这取决于您如何设置行高。因此，如果您可以提供一个 sscce，那将有助于我们考虑所有元素。 - Morfic

@Morfic 我更新了我的问题（设置行高）。这段代码很简单，但包含了所有信息，没有使用其他CSS（其余部分为默认的Valo）。 - rmuller

这应该足够了，但请告诉我您使用的确切Vaadin版本，因为setBodyRowHeight在v8.1.4+中已不再存在（它应该在8.2.0中得到修复）。 - Morfic

@Morfic 8.2.0.alpha2 - rmuller

Answer 1

这主要基于如何在div中垂直对齐图像的这个答案，通过试错进行了一些小变化和调整。

可以使用原始答案并设置固定行高（例如130）和垂直对齐: 中间，但更新的版本无论您设置多高都具有灵活性（在Chrome和Edge中进行了测试）。

代码:

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://dev59.com/7ZLea4cB1Zd3GeqP4JNE
}

Result:

- Morfic

---

脱帽致敬！原来只是CSS的问题。感谢您花费时间回答这些问题。真的非常感激！ - rmuller

@rmuller 不用谢，这就是SO存在的意义。另外没错，它基本上与CSS相关。 - Morfic