设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 为什么类选择器.header中的text-align没有生效？
返回列表 发新帖
查看: 383|回复: 3

[已解决]为什么类选择器.header中的text-align没有生效？

[复制链接]
猪头少年.zm
发表于 2023-10-22 12:09:02 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
想问一下各位大佬，为什么这段代码中的.header中的txet-align为什么没有生效？我应该如何进行修改？
  1. <!DOCTYPE html>
  2. <html lang="en" >

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>强盛集团</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.    
  16.         body {
  17.             min-height: 100vh;
  18.             background: url(images/05.png) center / cover;
  19.             display: flex;
  20.             justify-content: center;
  21.             align-items: center;
  22.         }

  24.         main.table {
  25.             width: 77vw;
  26.             height: 80vh;
  27.             background-color: #fff5;
  28.             box-shadow: 0 8px 16px #0005;
  29.             border-radius: 16px;
  30.             overflow: hidden;
  31.         }

  33.         .header {
  34.             width: 100%;
  35.             height: 10%;
  36.             text-align: center;
  37.             background-color: #fff4;
  38.             padding: 0 40px;
  39.             display: flex;
  40.             justify-content: space-between;
  41.             align-items: center;
  42.         }

  44.         .header .input-group {
  45.             width: 35%;
  46.             height: 50%;
  47.             background-color: #fff5;
  48.             padding: 0 20px;
  49.             border-radius: 10px;
  50.             display: flex;
  51.             justify-content: center;
  52.             align-items: center;
  53.             transition: .3s;
  54.         }

  56.         .header .input-group:hover {
  57.             width: 45%;
  58.             background-color: #fff8;
  59.             box-shadow: 0 5px 40px #0002;
  60.         }

  62.         .header .input-group img {
  63.             width: 20px;
  64.             height: 20px;
  65.         }

  67.         .header .input-group input {
  68.             width: 100%;
  69.             background-color: transparent;
  70.             border: none;
  71.             outline: none;
  72.         }

  74.         .shell {
  75.             width: 95%;
  76.             max-height: calc(90% - 25px);
  77.             background-color: #fffb;
  78.             margin: 8px auto;
  79.             border-radius: 10px;           
  80.             overflow: auto;
  81.             overflow: overlay;
  82.         }

  84.         .shell::-webkit-scrollbar {             /*偷的代码*/
  85.             width: 10px;
  86.             height: 10px;
  87.         }

  89.         table {
  90.             width: 100%;
  91.         }

  93.         td img {
  94.             width: 150px;
  95.             height: 100px;
  96.             margin-right: 10px;
  97.             /*border-radius: 50%;*/
  98.             vertical-align: middle;
  99.         }

  101.         table,
  102.         td {
  103.             border-collapse: collapse;              /*共用边框*/
  104.             padding: 20px;
  105.             text-align: left;
  106.         }

  108.         thead th {
  109.             position: sticky;
  110.             top: 0;
  111.             left: 0;
  112.             background-color: #d5d1defe;
  113.             text-align: center;
  114.         }

  116.    
  117.         tbody tr:nth-child(even) {              /*指定满足条件的子元素，even表示偶数*/
  118.             background-color: #0000000b;
  119.         }

  121.         tbody tr:hover {
  122.             background-color: #fff6 ;
  123.         }

  125.       
  126.     </style>
  127. </head>

  129. <body>
  130.     <main class="table">
  131.         <section class="header">
  132.             <h1 class="caption">强生集团主要产品一览</h1>
  133.             <div class="input-group">
  134.                 <input type="search" placeholder="查找...">
  135.                 <img src="images/search.png">
  136.             </div>
  137.         </section>
  138.         <section class="shell">
  139.             <table>
  140.                 <thead>
  141.                     <tr>
  142.                         <th>产品名称</th>
  143.                         <th>基本图片</th>
  144.                         <th>产品售价</th>
  145.                         <th>在售情况</th>
  146.                         <th>参数描述</th>
  147.                         <th>产品描述</th>
  148.                     </tr>
  149.                 </thead>

  151.                 <tbody>
  152.                     <tr>
  153.                        <tr>
  154.                             <td>QS pad</a></td>
  155.                             <td><img src = " " alt = "强盛平板" width= "433"></td>
  156.                             <td class="situation"><abbr title = "你知道的太多了">$1999(1999交个朋友)</abbr></td>
  157.                             <td class="situation">在售</td>
  158.                             <td>Q3芯片，512G内存，32G运行内存，10.9寸/12.8寸/15.6屏幕</td>
  159.                             <td>
  160.                                 更快、更强、更炫。Q3芯片，性能飞跃，创意无限。Liquid Retina XDR显示屏，色彩惊艳，细节无可匹敌。<br><br>

  162.                                 QS Keyboard搭配Trackpad，工作更高效，娱乐更畅快。QS Pencil二代，无限创作，数字世界尽在掌握。<br><br>

  164.                                 轻薄便携，不拘一格。无论是工作、学习还是创作，QSPad Pro 2021都将领您走向未知，创造不可思议。<br><br>

  166.                                 QSPad Pro 2021，超越一切，开启创新之旅。
  167.                             </td>
  168.                                     </tr>
  169.                     </tr>

  171.                     <tr>
  172.                         <td>QS book</a></td>
  173.                         <td><img src = " " alt = "这就是钟离" width= "433"></td>
  174.                         <td class="situation">$8848</td>
  175.                         <td class="situation">在售</td>
  176.                         <td>50000毫安电池，128G内存，2T固态硬盘,500MHz刷新率,Q4芯片，64核处理器</td>
  177.                         <td>
  178.                             无与伦比的速度，震撼的显示，无穷的创意。QSBook，重新定义了您的工作和创作方式。<br><br>
  179.         
  180.                             搭载M1芯片，性能飙升，能量效率超群。Retina XDR显示屏带来绚丽的视觉体验，令您陶醉其中。<br><br>
  181.                            
  182.                             轻薄便携，打破了边界。无论您是开发者、创意者还是专业人士，QSMacBook都将成为您创新之路上的伙伴。<br><br>
  183.                            
  184.                             QS MacBook，为您的未来而生。性能、创新、无限可能。
  185.                         </td>
  186.                     </tr>

  188.                     <tr>
  189.                         <td class="item">QS手机</a></td>
  190.                         <td><img src = "  " alt = "这就是甘雨" width= "433"></td>
  191.                         <td class="situation">$5888</td>
  192.                         <td class="situation">馨售</td>
  193.                         <td>Q3芯片，512G内存，32G运行内存，6.8寸屏幕</td>
  194.                         <td>
  195.                             当科技与美学完美融合,QS 12 Pro Max应运而生。这款智能手机不仅提供卓越的性能和功能，还拥有令人惊叹的外观。<br><br>

  197.                             QS 12 Pro Max采用全新的陶瓷盖板，赋予手机更高的耐用性和奢华感。其6.7英寸超视网膜XDR显示屏为您呈现无与伦比的色彩和对比度。配备A14仿生芯片，您将体验到无与伦比的性能和效率。<br><br>

  199.                             超感光LiDAR扫描仪和卓越的摄影系统将您的摄影技能提升至新的高度，即使在低光环境下也能捕捉清晰的照片和视频。<br><br>

  201.                             QS 12 Pro Max，是精湛工艺和创新的杰作，让您超越自我，创造美丽的瞬间。这不仅是一款手机，更是您生活和创造力的伙伴。<br><br>
  202.                         </td>
  203.                     </tr>

  205.                     <tr>
  206.                         <td class="item">QS Pencil 2代</a></td>
  207.                         <td><img src = " " alt = "这就是魈" width= "433"></td>
  208.                         <td class="situation">$100</td>
  209.                         <td class="situation">在售</td>
  210.                         <td>3000Mhz电池</td>
  211.                         <td>无需纸张，无需等待。QS Pencil（第二代）是数字创作的极致工具，让您的想法瞬间变为现实。高精度和低延迟的触控技术带来真实的书写和绘画体验。<br><br>

  213.                             不仅支持无线充电，插入QS Pad上即可连接，立刻启动。智能感应技术让您能够一键切换工具，随时调整线条粗细和色彩。<br><br>

  215.                             无论是草图、笔记还是艺术创作，QS Pencil 2都将成为您不可或缺的创作伙伴。<br><br>

  217.                             突破创意的界限，探索无限可能。QS Pencil（第二代），创意的魔法之笔，等待您的启发。<br><br>
  218.                         </td>
  219.                     </tr>

  221.                     <tr>
  222.                         <td class="item">QS keybord</a></td>
  223.                         <td><img src = " 没有url" alt = "这就是行秋" width= "433"></td>
  224.                         <td class="situation">$85</td>
  225.                         <td class="situation">在售</td>
  226.                         <td>暂无参数</td>
  227.                         <td>在触控的世界里，尽显轻松自如。苹果妙控键盘将科技与设计巧妙融合，让您的工作、创作与娱乐尽在指尖。超薄轻巧，便于携带，随时随地释放无限可能。<br><br>
  228.                
  229.                             独特的触控板设计，让您能够流畅操控，像使用魔术一样改写每一个动作。无论是办公任务还是创意设计，妙控键盘都能为您提供精准的控制和舒适的体验。<br><br>
  230.                
  231.                             全尺寸背光键盘，让您即便在昏暗的环境下也能无障碍工作。智能连接，瞬间启动，为您的数字生活增添便捷与高效。<br><br>
  232.                
  233.                             苹果妙控键盘，重新定义您与技术互动的方式，让创造力不再受限，畅享智能生活的精彩旅程！<br><br>
  234.                         </td>
  235.                     </tr>

  237.                     <tr>
  238.                         <td class="item">QS pord</a></td >
  239.                         <td><img src  = "  " alt = "假装有图片" width= "433"></td>
  240.                         <td class="situation">$150</td>
  241.                         <td class="situation">在售</td>
  242.                         <td>暂无参数</td>
  243.                         <td>音质如临现场，降噪似进入宁静。QS Pro，让您沉浸在音乐的美妙世界，同时抵挡城市的嘈杂喧哗。<br><br>

  245.                             智能降噪技术实时适应您的环境，为您带来真正的宁静。而透明模式则使您能够瞬间回到现实，不必摘下耳机即可倾听周围声音<br><br>
  246.                            
  247.                             全新的设计，更舒适贴合您的耳朵，不易脱落。IPX4防水等级，适合运动、旅行，无拘无束。<br><br>
  248.                            
  249.                         QS Pro，为音乐爱好者和生活的每个瞬间提供完美的音频体验。用音乐，靠近更多的美好。<br><br>
  250.                         </td>
  251.                     </tr>               
  252.                 </tbody>
  253.             </table>
  254.         </section>
  255.     </main>
  256. </body>


  259. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
陶远航
2023-10-22 12:09:29
在你的代码中，.header 类选择器中的 text-align: center; 没有生效的原因可能是因为你在 .header 中使用了 display: flex;。在 Flexbox 布局中，text-align 属性不会对子元素产生影响，因为 Flexbox 有自己的对齐方式，即 justify-content 和 align-items。

如果你想让 .header 中的文本居中，你可以尝试以下方法：

1. 对 .header 中的子元素应用 text-align: center;。例如，如果你想让标题居中，你可以添加以下样式：

  1. .header h1 {
  2.     text-align: center;
  3. }
复制代码


2. 使用 Flexbox 的对齐属性。如果你想让 .header 中的所有内容居中，你可以使用 justify-content: center; 和 align-items: center;。你已经在 .header 中使用了这两个属性，所以如果你的目标是让所有内容居中，那么你已经达到了这个目标。

请注意，这些解决方案可能需要根据你的具体需求进行调整。如果你能提供更多关于你希望如何对齐 .header 中的内容的信息，我可能能提供更具体的建议。
请注意，本回答来自GPT-4
如果问题已经解决，请设置最佳答案
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

陶远航
发表于 2023-10-22 12:09:29 | 显示全部楼层    本楼为最佳答案   
在你的代码中，.header 类选择器中的 text-align: center; 没有生效的原因可能是因为你在 .header 中使用了 display: flex;。在 Flexbox 布局中，text-align 属性不会对子元素产生影响，因为 Flexbox 有自己的对齐方式，即 justify-content 和 align-items。

如果你想让 .header 中的文本居中，你可以尝试以下方法：

1. 对 .header 中的子元素应用 text-align: center;。例如，如果你想让标题居中，你可以添加以下样式：

  1. .header h1 {
  2.     text-align: center;
  3. }
复制代码


2. 使用 Flexbox 的对齐属性。如果你想让 .header 中的所有内容居中，你可以使用 justify-content: center; 和 align-items: center;。你已经在 .header 中使用了这两个属性，所以如果你的目标是让所有内容居中，那么你已经达到了这个目标。

请注意，这些解决方案可能需要根据你的具体需求进行调整。如果你能提供更多关于你希望如何对齐 .header 中的内容的信息，我可能能提供更具体的建议。
请注意，本回答来自GPT-4
如果问题已经解决，请设置最佳答案
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Mike_python小
发表于 2023-10-22 12:09:38 | 显示全部楼层
Request failed with status code 400

球一个最佳答案谢谢啦！这对我非常重要！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

isdkz
发表于 2023-10-22 12:13:52 | 显示全部楼层
问题出在 .header 选择器上。在CSS中，选择器的优先级是根据其特定性进行计算的。在这段代码中， .header 选择器的特定性是1个类选择器，而其他选择器都没有类选择器。因此， .header 选择器的优先级最低，导致 text-align: center; 属性没有生效。

要解决这个问题，您可以提高 .header 选择器的特定性。例如，可以在 .header 选择器前添加一个元素选择器，如 section.header ，或者添加更多的类选择器，如 .table .header 。这样可以增加选择器的特定性，使其优先级更高，从而使 text-align: center; 属性生效。

修改后的代码示例：

  1. <section class="header">
  2.    <h1 class="caption">强生集团主要产品一览</h1>
  3.    <div class="input-group">
  4.       <input type="search" placeholder="查找...">
  5.       <img src="images/search.png">
  6.    </div>
  7. </section>
复制代码

  1. section.header {
  2.    width: 100%;
  3.    height: 10%;
  4.    text-align: center;
  5.    background-color: #fff4;
  6.    padding: 0 40px;
  7.    display: flex;
  8.    justify-content: space-between;
  9.    align-items: center;
  10. }
复制代码


这样修改后， .header 选择器的特定性增加了， text-align: center; 属性将会生效。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-2 00:48

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表