# 设置ListItem子组件的文字水平居中

#### 问题现象

如何实现每列Item的文字水平居中？

问题效果预览：

#### 效果预览

#### 背景知识

*   List：列表包含一系列相同宽度的列表项。仅支持ListItem、ListItemGroup子组件。
*   listDirection：设置List组件排列方向。
*   lanes：设置List组件的布局列数或行数。gutter为列间距，当列数大于1时生效。

#### 解决方案

当List组件设置listDirection(Axis.Horizontal)和lanes(2)时，内部的ListItem自身会均匀分配父List的高度，只可以设置每个ListItem垂直方向的位置；而此时ListItem宽度由自适应撑开，故无法设置每列Item的水平居中，因此需要给ListItem一个固定宽度，在每个ListItem同宽的情况下设置子组件的水平方向位置。

```
@Entry
@Component
export struct TwoLine {
  @State array?: Array<string> = new Array;

  aboutToAppear(): void {
    this.array?.push('一个栏目');
    this.array?.push('测试');
    this.array?.push('哈哈哈哈哈');
    this.array?.push('对对');
    this.array?.push('好吧好');
    this.array?.push('行行行行行');
    this.array?.push('对对对');
    this.array?.push('是吗');
    this.array?.push('栏目编辑');
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.array, (item: string) => {
          ListItem() {
            Column() {
              Text(item)
                .height(20)
                .backgroundColor(Color.White)
                .textAlign(TextAlign.Center)
                .align(Alignment.Center)
                .alignSelf(ItemAlign.Center)
                .constraintSize({ minWidth: 30 })
            }
            .width("24%") // 设置width固定时可以实现水平居中，不设置时listItem宽度由内容撑开，无法设置居中。
            .height('100%')
            .justifyContent(FlexAlign.Center)
            .backgroundColor(Color.Blue)
          }
          .margin({ bottom: 10 })
        });
      }
      .width('100%')
      .height(70)
      .lanes(2)
      .listDirection(Axis.Horizontal)
      .backgroundColor('#87ceeb')
      .alignListItem(ListItemAlign.Center)

      Text('如何实现每列文字的水平居中？')
        .margin({ top: 100 })
        .fontSize(20)
    }
    .padding(10)
  }
}
```