CODEWITHSUNDEEP
csscentering
user1940007
user1940007

Reputation: 751

Auto margin not working

The text in my li's don't seem to be centering I am using margin: 10px auto; and it isn't working, also I tried using the margin: 0 auto to center the whole ul but that isn't working either here is the 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;
}

and the 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>

Upvotes: 0

Views: 6375

Answers (2)

Adrift
Adrift

Reputation: 59769

You need to explicitly specify a width on the <p> before using margin: 0 auto;

ul.mainpackages li p{
margin: 10px auto;
font-size: 16px;
width: 180px;
}

jsfiddle

Upvotes: 2

petermk
petermk

Reputation: 777

Your paragraph is 100% wide, so when you try to center it...

You should either set the width or text-align: center inside the paragraph

Upvotes: 6

Related Questions