如何将我的标题以媒体大小居中？答案

【问题标题】：How do I center my caption in media size?如何将我的标题以媒体大小居中？
【发布时间】：2022-11-02 08:24:32
【问题描述】：

我想放置一个以常规尺寸为中心的媒体尺寸，当我将它的最大宽度更改为 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>

【问题讨论】：

请添加您的问题的图片，最好是可以运行的代码
看起来像这样imgur.com/a/AQxPtl8，我不确定可以运行的代码是什么？该代码以常规大小工作。但是当我尝试以移动尺寸运行它时，它仍然停留在左侧的 @media only 屏幕和 (max-width: 480px) { caption { caption-side: Top;文本对齐：居中；字母间距：1px； }

标签： html css

【解决方案1】：

您需要将块元素居中：

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

【讨论】：

还是一样，请问还有什么地方可以修吗？宽度可能吗？
添加你的html...
<section id="right"> <table> <caption>每个人都会喜欢的书！</caption> <thead> <th colspan="4">推荐的儿童读物！</th> <th colspan="2" style ="display: none">推荐儿童读物！</th> <tr> <th colspan="1">书名</th> <th colspan="1">书名</th> <th colspan="1">作者</th> <th colspan="1">书籍摘要</th> </tr> </thead>
它看起来像这样（我不确定为什么它的格式很奇怪），但这是我的 HTML 中包含标题的部分。

【解决方案2】：

只需将 margin:0 auto 添加到您的表中

caption {
   font-family: "Rock Salt", cursive;
   padding: 20px;
   font-style: italic;
   caption-side: Top;
   color: #666;
   text-align: center;
   letter-spacing: 1px;
 }

table{
margin:0 auto;}


@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>
         </table>

【讨论】：

它在正常尺寸的中心，但是当我按 F12 进入移动尺寸时。它仍然卡在左边。我输入了代码，但它并没有像预期的那样工作。
这适用于所有尺寸。
我最终弄清楚了。我不得不在这张表中添加标题，tbody, tr, td, th { display: block; } 一旦我添加了标题 caption, table, tbody, tr, td, th { display: block; } 它像我想要的那样居中。谢谢你的帮助