如何将columnRight内文本水平对齐至左侧与居中之间？

将columnRight中的文本水平调整至左侧与屏幕居中位置之间，现有代码及当前效果如下：

HTML 代码 #

<div className={css.title} >
  <div className={css.row}>
    <div className={css.columnLeft}>
      <div className={css.header}>Images</div>
    </div>
    <div className={css.columnRight}>
      <strong>Image 1 of 2</strong>
    </div>
  </div>
  <Icon />
</div>

CSS 代码 #

.row {
  width: 100%;
  display: flex;
  align-items: center;
}

.columnLeft {
  flex: 1 0 25%;
  text-align: left;
}

.columnRight {
  flex: 1 0 75%;
}

当前效果 #

解决方案 #

要让columnRight内的内容落在左侧与屏幕居中之间，推荐两种简洁实现方式：

• 方法1：基于左侧列宽度的精准偏移
  利用calc()计算偏移量，让内容刚好处于左侧列右侧到屏幕中间的区域，布局一致性更强：

  .columnRight {
    flex: 1 0 75%;
    padding-left: calc(25% / 2); /* 偏移左侧列宽度的一半，精准定位到目标区域起点 */
  }
  

• 方法2：直接设置固定偏移
  如果不需要和左侧列关联，可直接设置左内边距控制位置，灵活调整视觉效果：

  .columnRight {
    flex: 1 0 75%;
    padding-left: 10%; /* 根据需求调整百分比或固定像素值 */
  }
  

内容的提问来源于stack exchange，提问作者Arundeep Chohan