最新產品區塊中產品名稱和價格如何居中顯示

之前我們一起討論過如何調整產品列表頁面的產品名稱和價格居中顯示，傳送門—> http://www.dailysportsnews24.com/jianzhan/168.html

企業用戶經常會在網站首頁添加一個最新產品區塊，使用戶最便捷地了解公司的最新產品信息。所以這篇文章我們一起了解一下，如何設置最新產品區塊中產品名稱和價格居中顯示。

首先我們新建一個最新產品區塊，并布局到網站首頁。默認顯示效果如下：

接下來，我們在該區塊的CSS項里添加如下代碼，以達到我們預期的效果：

#blockID .card-heading{
    text-align:center;
}
#blockID .card-heading span{
    float:none !important;
}

效果如下：

如果想使產品名稱和價格各占一行，可以用下面代碼：

#blockID .card-heading{
    text-align:center;
}
#blockID .card-heading span{
    float:none !important;
    display:block;
    width:100% !important;
}

效果如下：

如果在這里不想顯示價格，可以用下面代碼：

#blockID .card-heading{
    text-align:center;
}
#blockID .card-heading span{
    float:none !important;
}
#blockID .card-heading span:last-child{
    display:none;
}