文本未在打印介质中正确对齐中心

Question

我有一个HTML / CSS页面，页面看起来很好，但是当我打印它时，一些文本（由2行组成）没有正确对齐中心。

我尝试使用padding-left或margin-left来修复它而没有结果。

以下是代码的一部分：

.tsc_pricingtable02 li.pricing_header1 {
height: 49px;
font-size: 18px;
line-height: 20px;
color: #ffffff;
-webkit-border-radius: 1px 6px 0 0;
-khtml-border-radius: 19px 6px 0 0;
-moz-border-radius: 19px 6px 0 0;
border-radius: 19px 6px 0 0;
}
.tsc_pricingtable02 ul li {
margin: 0px;
width: 100%;
height: 100%;
height: 35px;
padding-top: 10px;
float: left;
text-align: center;
padding-left: 0px;
}

<ul class="pricing_column red">
        <li class="pricing_header1">Tooway <br>Lite M</li>
        <li class="pricing_header2">299Dh <span> HT/mois</span></li>
        <li class="odd">10MB</li>
        <li class="even">2MB</li>
        <li class="odd">10GO</li>
        <li class="even"><span class="pricing_yes"></span></li>
        <li class="odd">3000DH</li>
        <li class="even">5200DH</li>
        <li class="odd">600DH</li>
        <li class="pricing_footer"><a href="#" class="tsc_buttons2 black">Sign Up</a></li>
      </ul>

Answer 1

你不能text-align: center;和float:left;希望它会居中。它不会。

您需要在<div>内<li> width center并 <ul class="pricing_column red"> <li class="odd"><div>10MB</div></li> <li class="even"><div>2MB</div></li> <li class="odd">10GO</div></li> </ul> .tsc_pricingtable02 ul li { margin: 0px; width: 100px; <!-- Gave a real width --> height: 100%; height: 35px; padding-top: 10px; float: left; <!-- kept the align left, but removed align center --> padding-left: 0px; } .tsc_pricingtable02 ul li div { text-align: center; <!-- aligned center --> width:100%; <!-- Gave full width --> }

以下是我所谈论的一个示例......

{{1}}

Answer 2

问题是浮动，我通过将其设置为无

来修复它

.tsc_pricingtable02 ul li {
    margin: 0px;
    width: 100%;
    height: 100%;
    height: 35px;
    padding-top: 10px;
    float: none;
    text-align: center;
    padding-left: 0px;
}

非常感谢