在 bulma 中水平居中一个项目并使其旁边的项目垂直居中

Question

我想将图像或图标水平居中，并将其他元素放置在其旁边，如下图所示：

这是我使用的代码：

  <div class="columns">
        <div class="column">
          <p class="bd-notification is-primary">ICON GOES HERE</p>
        </div>
        <div class="column">
          <p class="bd-notification is-primary">TEXT GOES HERE</p>
          <p class="bd-notification is-primary">Some text</p>
          <button (click)="onSelect()" class="button is-link">Select</button>
          <p>{{ select }}</p>
        </div>
      </div>

Answer 1

在标题部分的样式标签或外部 css 文件中尝试此操作：

.columns { 
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.column{
    margin: 0 10px;
}

Answer 2

.columns {
  display: flex;
}
.forImg {
  max-height: 250px;
  border-radius : 50%;
}

.forInfos {
  padding-left: 10px;
}

  <div class="columns">
        <div class="column forImg">
          <img src="https://picsum.photos/200" class="image-circle image-center">
        </div>
        <div class="column forInfos">
          <p class="bd-notification is-primary">TEXT GOES HERE</p>
          <p class="bd-notification is-primary">Some text</p>
          <button (click)="onSelect()" class="button is-link">Select</button>
        </div>
      </div>

在 bulma 中水平居中一个项目并使其旁边的项目垂直居中

Center an item horizontally and have the items next to it centered vertically in bulma

html

css

bulma