自动保证金无效

时间:2013-01-17 02:07:16

标签: css centering

我的文字中的文字似乎没有居中我使用的是保证金:10px auto;并且它不起作用,我也尝试使用margin:0 auto来居中整个ul,但这也不起作用 这是css

ul.mainpackages {margin: 0 auto; height: 40px; width: 100%; }
ul.mainpackages li {
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-top-style: double;
    border-bottom-style: double;
    border-top-color: #FDFECD;
    border-bottom-color: #FDFECD;
    height: 40px;
    width: 300px;
    background-color: #DDEFEF;
    display: inline-block;
    margin: 0px 60px;
}
ul.mainpackages li p{
    margin: 10px auto;
    font-size: 16px;
}

和html

<ul class="mainpackages">
<li class="first1"><p>Pick a package that suits you!</p></li>
<li class="last1"><p>Special deals &amp; offers!</p></li>
</ul>

2 个答案:

答案 0 :(得分:5)

您的段落是100%宽,所以当您尝试将其居中时......

您应该在段落

中设置宽度或text-align:center

答案 1 :(得分:2)

在使用<p>

之前,您需要在margin: 0 auto;上明确指定宽度
ul.mainpackages li p{
margin: 10px auto;
font-size: 16px;
width: 180px;
}

jsfiddle