Bagaimana untuk memusatkan tajuk dalam dimensi media?

Question

Saya ingin meletakkan saiz media berpusat pada saiz biasa dan apabila saya menukar lebar maksimumnya kepada 480, pengepala berada di sebelah kiri.

Tetapi ia melekat di sebelah kiri. Bagaimanakah saya boleh menukar kod supaya tajuk berada di tengah apabila media diubah saiznya?

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>

Answer 1

Anda perlu memusatkan elemen blok:

@media only screen and (max-width: 480px) {
   caption {
      caption-side: Top;
      text-align: center;
      letter-spacing: 1px;
      margin:0 auto;
}