HTML

<mat-card-content fxLayout="column" class="content pl-3">
      <span>
        <h6 class="main-line border-bottom pt-2"> Members &nbsp;  <mat-icon class="dia">arrow_right_alt</mat-icon> <span class="numbers">1000</span></h6>
        <h6 class="line border-bottom">Non-Members  <span class="numbers">200</span></h6>
        <h6 class="line border-bottom">Traders  <span class="traders">250</span></h6>
        <h6 class="line border-bottom">Employee  <span class="employee">40</span></h6>
        <h6 class="line border-bottom">-</h6>
        <h6>-</h6>
      </span>

    </mat-card-content>

css

.dia{

    // margin-bottom: 4%;
    line-height: 0.2;
    // margin-top: 1%;
    color: #0b4983;
    padding-top: -5px;
    position: absolute;
}

uj5u.com熱心網友回復：

您可以洗掉position-absolute和使用該vertical-align屬性。

.dia {
  // margin-bottom: 4%;
  line-height: 0.2;
  // margin-top: 1%;
  color: #0b4983;
  vertical-align: 0.06em;
}

<mat-card-content fxLayout="column" class="content pl-3">
  <span>
        <h6 class="main-line border-bottom pt-2"> Members &nbsp;  <mat-icon class="dia">arrow_right_alt</mat-icon> <span class="numbers">1000</span></h6>
  <h6 class="line border-bottom">Non-Members <span class="numbers">200</span></h6>
  <h6 class="line border-bottom">Traders <span class="traders">250</span></h6>
  <h6 class="line border-bottom">Employee <span class="employee">40</span></h6>
  <h6 class="line border-bottom">-</h6>
  <h6>-</h6>
  </span>

</mat-card-content>

uj5u.com熱心網友回復：

您可以讓您的.main-line border-bottom班級成為flexbox顯示幕并將對齊方式定義為居中。這對于回應式設計來說會好得多。

例子：

div {
display:flex;justify-content:center;align-items:center;
}

span {
margin:5px;
}

span:nth-child(2){
width:20px;
background:red;padding:5px;color:white;
}

<div>
      <span>text</span>
      <span>arrow icon</span>
 </div>

uj5u.com熱心網友回復：

您可以洗掉“位置：絕對”并使用vertical-align或line-height或margin-top屬性。

.dia{
    line-height: 1.5; /* or more */
}

或者

.dia{
    vertical-aligne: middle
}

或者

.dia{
    margin-top: 10px; /* a numbre to center vertical */
}

uj5u.com熱心網友回復：

有幾種方法可以使元素垂直居中，請快速檢查上面的 2：

當您知道元素的高度時（最佳渲染）

position:absolute
top:50%
margin-top: -[the height of the arrow / 2);

當你不知道或者高度是動態的

position:absolute:
top:50%;
transform:translateY(-50%);

根據經驗，在某些瀏覽器中，第二個示例在嘗試定位時有時會“破壞像素”。當它試圖在中間精確居中時，如果這意味著放置 1.234234px，它將創建一個抗鋸齒，使小東西看起來很奇怪。但在一些瀏覽器中，比如 edge 它沒有。

uj5u.com熱心網友回復：

在主要元素上添加此樣式

.main-line{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.numbers{
   margin-left: auto;
}

主線元素內的所有文本都將垂直居中

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337344.html

標籤：html css

上一篇：如何在vuejs范圍樣式中使用像::before這樣的偽選擇器

下一篇：并排和上下顯示flexbox