Question

我想垂直居中这个词＆＃39;好处＆＃39;位于段落标签中。正如您所看到的，我尝试使用verticall-align：middle以内联样式执行此操作，但没有发生任何影响。

<ul class="list-inline benefits-hexagon02" style="text-align: center;">
    <li class="benefit-analysis">
        <span class="opp-input topp-cycle cycle-default benefit-buttons icon-benefits00" data-action="class" data-cycle="icon-benefits00,icon-benefits01,icon-benefits02,icon-benefits03,icon-benefits04,icon-benefits05" data-n="<?php echo $BenefitAccuracy; ?>" data-col="pBenefitAccuracy"  aria-hidden="true"></span>
            <p class="waste-label">Accuracy &amp; Precision</p>
    </li>
    <li class="benefit-analysis">
            <p style="text-align: CENTER;"><center>Benefits</center></p>
    </li>
    <li class="benefit-analysis">
        <span class="opp-input topp-cycle cycle-default benefit-buttons icon-benefits00" data-action="class" data-cycle="icon-benefits00,icon-benefits01,icon-benefits02,icon-benefits03,icon-benefits04,icon-benefits05" data-n="<?php echo $BenefitRiskReduction; ?>" data-col="pBenefitRiskReduction"  aria-hidden="true"></span>
            <p class="waste-label">Risk Reduction</p>
    </li>
</ul>

Answer 1

假设您希望<li>使用＆＃39;好处＆＃39;在内部，要与页面高度垂直对齐显示，您可以使用transform CSS3规则。

以下是使用您的代码的示例。

＆＃13;

.benefits{
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

＆＃13;

<ul class="list-inline benefits-hexagon02" style="text-align: center;">
    <li class="benefit-analysis">
        <span class="opp-input topp-cycle cycle-default benefit-buttons icon-benefits00" data-action="class" data-cycle="icon-benefits00,icon-benefits01,icon-benefits02,icon-benefits03,icon-benefits04,icon-benefits05" data-n="<?php echo $BenefitAccuracy; ?>" data-col="pBenefitAccuracy"  aria-hidden="true"></span>
            <p class="waste-label">Accuracy &amp; Precision</p>
    </li>
    <li class="benefit-analysis benefits">
            <p>Benefits</p>
    </li>
    <li class="benefit-analysis">
        <span class="opp-input topp-cycle cycle-default benefit-buttons icon-benefits00" data-action="class" data-cycle="icon-benefits00,icon-benefits01,icon-benefits02,icon-benefits03,icon-benefits04,icon-benefits05" data-n="<?php echo $BenefitRiskReduction; ?>" data-col="pBenefitRiskReduction"  aria-hidden="true"></span>
            <p class="waste-label">Risk Reduction</p>
    </li>
</ul>

＆＃13;

其他说明

我从HTML代码中删除了<center>和vertical-align属性，并将其替换为相应的CSS规则

我将.benefits课程添加到了＆＃39;好处＆＃39; <li>以便专门选择并应用css规则

Answer 2

如果<li class="benefit-analysis">有固定的高度，然后，您可以将line-height添加到span和p代码

如何垂直居中项目

2 个答案: