CSS卡片頭居中是網頁設計中經常用到的一個技巧。通過這個技巧,可以將標題文字居中顯示,從而美化頁面排版,讓用戶感受到更好的視覺效果。
.card{ width:300px; height:200px; background-color:#f4f4f4; padding:10px; border-radius:10px; box-shadow:2px 2px 10px #dcdcdc; } .card h2{ text-align:center; margin-top:50px; font-size:24px; }
代碼中首先定義了一個.card類,該類用于定義卡片的基礎樣式,包括寬度、高度、背景顏色、內邊距、邊框半徑和陰影等。然后在該類的子元素h2中,使用text-align:center屬性將文字居中顯示,并通過margin-top屬性控制標題距離頂部的位置。最后使用font-size屬性設置標題文字的大小。
使用上述代碼,可以讓卡片標題文字在頁面中居中顯示,而且具有美觀的樣式。這個技巧非常適用于卡片式的設計,可以讓頁面的布局更加整潔、美觀。
下一篇css弄描邊