在 div 的中心对齐文本和图标

Question

我创建的评分量表有 N具有固定宽度。 每个速率都有一个值，该值显示在相应的内部div和描述。

我的问题是描述和相关图标在div但从左边开始。

  <div class="card card-accent-primary">
    <div class="card-header text-left">
      Rating values
    </div>
    <div class="card-body">
      <div class="col-12 mt-2 mb-1 p-buttonset valore-rating-display justify-content-center">
        <div *ngFor="let scala of scalaRating; let i=index" style="width: 5rem">
          <div>
            <button pButton type="button" label="{{scala.valoreRating}}" class="p-button-outlined cursor-default"
                    [class.rounded-left]="i == 0" [class.rounded-right]="i == (scalaRating.length - 1)"
                    style="background-color: {{scala.codColoreValRating}}; color: black; width: 5rem">
            </button>
          </div>
          <div *ngIf="rating == scala.valoreRating" class="position-relative">
            <i class="fa fa-caret-up font-weight-bold font-xxlarge"></i>
            <div class="position-absolute" style="word-wrap: break-word; left: -1rem">{{scala.descrizioneValRating}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

我希望图标和描述位于图像中心（我用红色标记了所需位置）：

这里有示例代码：

https://stackblitz.com/edit/angular-a3akxa?file=src/app/app.component.html

Answer 1

    <div *ngFor="let scala of scalaRating; let i=index" class="wrapper">
      <button ...></button>
      <ng-container *ngIf="rating == scala.valoreRating" >
        <i class="..."></i>
        <div style="word-wrap: break-word;">{{scala.descrizioneValRating}}
        </div>
      </ng-container>
    </div>

一个独特的类：包装器（忘记位置：绝对，左边距......:)

.wrapper{
  width:5rem;
  display:flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items:center;
}

查看<i> 和<div>{{scala.descriptineValRatting}}</div> 如何与<button> 具有相同的“父级”

你的forked stackblitz

Answer 2

我建议使用 flex 来完成此操作 https://codepen.io/jayu/pen/gObPVgj

<div class="demo-solution demo-solution--flexbox">
   <img width="100" height="50" src="http://placehold.it/100x50" alt="" />
   <span>Alignment using flexbox</span>
</div>

.demo-problem, .demo-solution {
  font-size: 3em;
}

.demo-solution--flexbox {
  display: flex;
  align-items: center;
  margin:auto;
  img {
    margin: 10px;
    padding: 10px;
    transition: margin 300ms;
  }
}

Answer 3

只需将其添加到 app.component.css ：

.fa-caret-up {
  display: flex;
  justify-content: center;
}

享受！ :)

一点解释：

• 不想添加更多类
• Display flex 非常适合使内容居中
• 如果你想了解更多关于 display: flex 的信息，试试这个：https://flexbox.buildwithreact.com

Answer 4

没有弹性布局的解决方案：

1. 图标。 将text-align: center; 添加到图标的父 div（相对位置的）
2. 说明 在描述div中添加left: 50%;transform: translate(-50%, 0);实现居中对齐。 如：<div _ngcontent-ghu-c0="" class="position-absolute" style="word-wrap: break-word;left: 50%;transform: translate(-50%, 0);position: absolute;">F - RISCHIO MEDIO</div>。 确保位置相关类具有position:relative; 样式。

   .box {
     text-align:center;
   }
   h3 {
     padding-top: 60px; 
     margin:0;
   }
   .line {
     display:inline-block;
     width: 50px;
     margin:auto;
     background-color: #f1f1f1; 
     position: relative;
   }
   .fCell {
     text-align:center;
   }
   .desc {
     white-space: nowrap;
   }
   .doCenter {
     position: absolute;
     left:50%;
     transform: translate(-50%, 0);
     color: red;
   }

           <div class="box">
               <h3>Original:</h3>
               <div class="line">
                   <div class="fCell">F</div>
                   <div class="desc">hello world!</div>
               </div>
               <h3>use left/transform to center long size text:</h3>
               <div class="line">
                   <div class="fCell">F</div>
                   <div class="desc doCenter">left/transform to center</div>
               </div>
               <h3>use left/transform to center small size text:</h3>
               <div class="line">
                   <div class="fCell">F</div>
                   <div class="desc doCenter">f</div>
               </div>
           </div>