我想放置一個以常規尺寸居中的媒體尺寸,當我將其最大寬度更改為 480 時,標題位於左側。
但它黏在左邊。如何更改程式碼,使標題在媒體大小時位於中間?
caption {
font-family: "Rock Salt", cursive;
padding: 20px;
font-style: italic;
caption-side: Top;
color: #666;
text-align: center;
letter-spacing: 1px;
}
@media only screen and (max-width: 480px) {
caption {
caption-side: Top;
text-align: center;
letter-spacing: 1px;
}
<section id="right">
<table>
<caption>Books everyone will enjoy!</caption>
<thead>
<th colspan="4">Recommended childrens books!</th>
<th colspan="2" style="display: none">Recommended childrens books!</th>
<tr>
<th colspan="1">Front of the book</th>
<th colspan="1">Title of the book</th>
<th colspan="1">Authors</th>
<th colspan="1">Book Summary</th>
</tr>
</thead>
您需要將區塊元素置中:
@media only screen and (max-width: 480px) { caption { caption-side: Top; text-align: center; letter-spacing: 1px; margin:0 auto; }