Vaadin图标居中对齐问题：如何将图标在布局中居中？

你直接给Image设置text-align: CENTER是没用的，这个CSS属性是用来控制容器内元素的对齐，不是给元素本身用的。下面给你几种可行的解决办法：

方法1：用布局容器的内置对齐API（以Vaadin为例） #

如果用的是Vaadin的布局组件（比如HorizontalLayout/VerticalLayout），直接用布局的对齐方法更简单：

// 创建布局容器
HorizontalLayout imageLayout = new HorizontalLayout();
// 设置图片在布局中水平居中
imageLayout.setHorizontalComponentAlignment(Alignment.CENTER, image1);
// 若需要垂直居中，加上这行
imageLayout.setVerticalComponentAlignment(Alignment.CENTER, image1);
// 将图片添加到布局
imageLayout.add(image1);

方法2：通过CSS给父容器设置对齐 #

给图片的父容器添加样式，利用Flex布局实现居中：

// 给父容器添加自定义样式类
imageLayout.addClassName("centered-image-container");

然后在你的CSS文件中添加：

.centered-image-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 必须占满父容器宽度，否则水平居中不生效 */
}

方法3：用text-align给父容器设置（适合行内元素场景） #

如果父容器是块级元素，也可以用传统的text-align方式：

// 给父容器设置text-align
imageLayout.getStyle().set("text-align", "center");
// 确保图片是行内/行内块元素（默认图片是inline，这行可选）
image1.getStyle().set("display", "inline-block");

内容的提问来源于stack exchange，提问作者Vishu Dhanawade