Question

出于某种原因，我有一点时间试图弄清楚如何使用css在我的页面中居中这个愚蠢的定价表。每个表的宽度为40％，我已经尝试将左右边距更改为自动使用CSS，但没有成功。

这是HTML：

<div id="pricing-table" class="pricing-table">
            <ul>
                <li class="heading">Bronze</li>
                <li class="price">£20</li>
                <li>Starter package</li>
                <li>15 Projects</li>
                <li class="action"><a href="">Buy Now</a></li>
            </ul>

            <ul class="feature">
                <li class="heading">Silver</li>
                <li class="price">£60</li>
                <li>Intermediate package</li>
                <li>20 Projects</li>
                <li class="action"><a href="">Buy Now</a></li>
            </ul>


        </div>

这是CSS：

.pricing-table ul{ 
border-width: 1px; 
border-style: solid; 
border-color: #CCCCCC; 
border-radius: 4px; 
margin: 2px;
width: 40%; 
text-align: center; 
font-family: 'Arial'; 
list-style: none; 
float: left; 
padding: 5px; 
background-color: #FFFFFF; 
} 
.pricing-table ul:hover{ 
-webkit-transform: scale(1.1); 
transform: scale(1.1); 
box-shadow: 3px 5px 7px rgba(0,0,0,.7); 
} 
.pricing-table ul li{ 
 padding: 10px; 
 background-color: #FFFFFF; 
 border-width: 0px; 
 border-style: dotted; 
border-color: #CCCCCC; 
border-radius: 4px; 
border-bottom-width: 1px; 
font-size: 15px; 
} 
.pricing-table li:first-child{ 
border-bottom: 0; 
} 
.pricing-table li:last-child{ 
border-bottom: 0; 
} 
.pricing-table li:nth-child(odd){ 
background-color: #FFFFFF; 
} 
.pricing-table ul .heading{ 
color: #FFFFFF; 
background-color: #5091B2; 
font-size: 30px; 
} 
.pricing-table ul .price{ 
color: #636363; 
background-color: #FFFFFF; 
font-size: 25px; 
} 
.pricing-table ul .action{ 
font-size: 20px; 
background-color: #ffffff; 
color: #6C9694; 
} 
.pricing-table .action a{ 
border-color: #CCCCCC; 
border-width: 1px; 
border-radius: 4px; 
background-color: #E9F7FE; 
padding-top: 4px; 
padding-bottom: 4px; 
padding-left: 100px; 
padding-right: 100px; 
border-style: solid; 
color: #5091B2; 
}

我想提前感谢大家提供的任何帮助。

到目前为止我已经fiddle了。

Answer 1

<ul>元素向左浮动。为了水平对齐项目，您可以在.pricing-table上设置适当的宽度，然后使用margin: 0 auto;

注意边缘。您必须包含<ul>元素的边距，以计算.pricing-table元素的宽度。

但是，要摆脱为.pricing-table指定显式宽度，您可以将ul元素的显示类型更改为inline-block，并使用{{1}对齐内联元素他们的父母如下：

text-align: center;

<强> Working Demo

还有一个white space between inline-block elements，您可能需要考虑删除它。

您也可以从.pricing-table { text-align: center; /* <-- align the inline(-block) elements horizontally */ } .pricing-table ul { display: inline-block; /* <-- display the ul elements as inline-block */ vertical-align: top; /* <-- keep the inline(-block) elements at the top */ /* other styles here... */ }元素中删除边距，而不是删除它们之间的空白区域。

<强> Updated Demo

您的选择：）

Answer 2

尝试这样做：

.pricing-table{
    width: 80%; 
    margin: auto;
}

或任何您想要的宽度。

Fiddle Demo

Answer 3

如果您可以在正文中定义宽度，则在 CSS 中执行：

 body { 
    width :900px; 
    margin:auto;

}

Answer 4

尝试包含此内容;一个fiddle

.pricing-table{
    disply:block;
    margin-right: auto;
    margin-left:auto;
    border:1px solid black; //just extra
    width:80%;  //need to define width to be able to center
}

Answer 5

你试过这个吗？ fiddle here

#pricing-table{
     width:80%;
     margin: auto;
}

Answer 6

也许你应该把它添加到你的CSS：

body{
    text-align:center;
    margin:0 auto;
    padding:0 auto;
}

.pricing-table {
    text-align:center;
    margin:0 auto;
    padding:0 auto;
    width:40%;
}

.pricing-table ul{ 
    border-width: 1px;
    border-style: solid; 
    border-color: #CCCCCC; 
    border-radius: 4px; 
    margin: 2px;
    width: 100%;              //40% is now 100%
    text-align: center; 
    font-family: 'Arial'; 
    list-style: none; 
    float: left; 
    padding: 5px; 
    background-color: #FFFFFF; 
}

Answer 7

如果您希望它们位于整个屏幕的中间（居中），请尝试使用以下CSS，并在两个<ul>元素之间留出一些间距。刚添加了一个正文声明并更改了.price-table ul中的边距，只是一些不同的内容。

body {
    width:900px;
    margin:auto;
    padding-top:150px
}

.pricing-table ul { 
    border-width: 1px; 
    border-style: solid; 
    border-color: #CCCCCC; 
    border-radius: 4px; 
    margin:30px;
    width: 40%; 
    text-align: center; 
    font-family: 'Arial'; 
    list-style: none; 
    float: left; 
    padding: 5px; 
    background-color: #FFFFFF; 
}

.pricing-table ul:hover { 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
    box-shadow: 3px 5px 7px rgba(0,0,0,.7); 
}

.pricing-table ul li { 
    padding: 10px; 
    background-color: #FFFFFF; 
    border-width: 0px; 
    border-style: dotted; 
    border-color: #CCCCCC; 
    border-radius: 4px; 
    border-bottom-width: 1px; 
    font-size: 15px; 
}

.pricing-table li:first-child{ 
    border-bottom: 0; 
}

.pricing-table li:last-child{ 
    border-bottom: 0; 
}

.pricing-table li:nth-child(odd) { 
    background-color: #FFFFFF; 
}

.pricing-table ul .heading { 
    color: #FFFFFF; 
    background-color: #5091B2; 
    font-size: 30px; 
}

.pricing-table ul .price { 
    color: #636363; 
    background-color: #FFFFFF; 
    font-size: 25px; 
}

.pricing-table ul .action { 
    font-size: 20px; 
    background-color: #ffffff; 
    color: #6C9694; 
}

.pricing-table .action a { 
    border-color: #CCCCCC; 
    border-width: 1px; 
    border-radius: 4px; 
    background-color: #E9F7FE; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    padding-left: 100px; 
    padding-right: 100px; 
    border-style: solid; 
    color: #5091B2; 
}

尝试在页面中居中定价表

7 个答案:

Fiddle Demo