在显示 flex 上右对齐文本

Posted 2023-03-07

【中文标题】在显示 flex 上右对齐文本

【英文标题】：Right align text on display flex

【发布时间】：2017-03-10 02:20:46

【问题描述】：

我的代码如下：

<div className="listContent">
     <div>
        <div className="titleAndCounterBox">
           <div className="headerListTitle">list.name</div><br />
           <div className="headerListExpires">
                 <div>formatTime(this.state.remainingTime).days<span>language.days</span></div>
                 <div>formatTime(this.state.remainingTime).hours:formatTime(this.state.remainingTime).minutes:formatTime(this.state.remainingTime).seconds</div>
            </div>
        </div>
        <div><img src=images.header_listInfo_png /></div>
        <div className="headerTotalCarsInTheList"><span>totalCarsInTheList</span></div>

    </div>
</div>

而我的scss如下：

.listContent 
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-family: $remarketingFontFamily;

    div 
      display: flex;
      align-items: center;

      .titleAndCounterBox 
        flex-wrap: wrap;

        .headerListTitle 
          font-size: $portalFontSize - 1;
          color: $portalBlueColor;
          flex-basis: 100%;
        

        .headerListExpires 
          font-size: $portalFontSize - 3;
          color: $portalYellow;

          div:first-child 
            margin-right: 15px;
          
        
      

      .headerTotalCarsInTheList 

        text-align: center;
        line-height: 40px;
        color: $portalDarkGrey;
        font-size: $infoTextSize + 6;
        border: 1px solid $portalDarkGrey;
        border-radius: 50%;
        margin: 0 15px;

        span
          width: 40px;
          height: 40px;
        
      
    


  

listContent（父 div）如下所示：

titleAndCounterBox 看起来像这样：

我想要的是 titleAndCounterBox 中的文本是右对齐的。类似的东西：

但我无法做到这一点。

有什么建议吗？

【问题讨论】：

令人困惑，你说你希望里面的“文本”是正确的，所以你的意思是“33day 10:15:13”文本？如果是，那么这不是您提供的预期图像的右侧

你是对的。文本对齐良好，但我希望 titleAndCounterBox 的宽度更小。我希望它就像最后一张照片一样。

检查这个Codepen - 它看起来不正确。我知道答案，但你很难说出你到底想要什么。

在 Codepen 上很好。奇怪的。不是其他原因造成的问题吗？

当我将你所有的 className 更改为 class 时，我得到了想要的结果。你能确认一下吗？

【参考方案1】：

感谢我们的讨论，您可以稍微更改您的 CSS :-)

.headerListTitle  
   font-size: $portalFontSize - 1; 
   color: $portalBlueColor;

   margin-left: auto; 
   flex-basis: 58%; 
  //you could replace these 2 lines with below 2 lines if you wish

  //justify-content: flex-end;
  //flex-basis: 89% (same as below row)

 

.headerListExpires  
   font-size: $portalFontSize - 3; 
   color: $portalYellow; 
   flex-basis: 89%; 

   div:first-child  
      margin-left: auto; 
      margin-right: 15px;