为什么类选择器.header中的text-align没有生效？
想问一下各位大佬，为什么这段代码中的.header中的txet-align为什么没有生效？我应该如何进行修改？<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>强盛集团</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: url(images/05.png) center / cover;
display: flex;
justify-content: center;
align-items: center;
}
main.table {
width: 77vw;
height: 80vh;
background-color: #fff5;
box-shadow: 0 8px 16px #0005;
border-radius: 16px;
overflow: hidden;
}
.header {
width: 100%;
height: 10%;
text-align: center;
background-color: #fff4;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header .input-group {
width: 35%;
height: 50%;
background-color: #fff5;
padding: 0 20px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: .3s;
}
.header .input-group:hover {
width: 45%;
background-color: #fff8;
box-shadow: 0 5px 40px #0002;
}
.header .input-group img {
width: 20px;
height: 20px;
}
.header .input-group input {
width: 100%;
background-color: transparent;
border: none;
outline: none;
}
.shell {
width: 95%;
max-height: calc(90% - 25px);
background-color: #fffb;
margin: 8px auto;
border-radius: 10px;
overflow: auto;
overflow: overlay;
}
.shell::-webkit-scrollbar { /*偷的代码*/
width: 10px;
height: 10px;
}
table {
width: 100%;
}
td img {
width: 150px;
height: 100px;
margin-right: 10px;
/*border-radius: 50%;*/
vertical-align: middle;
}
table,
td {
border-collapse: collapse; /*共用边框*/
padding: 20px;
text-align: left;
}
thead th {
position: sticky;
top: 0;
left: 0;
background-color: #d5d1defe;
text-align: center;
}
tbody tr:nth-child(even) { /*指定满足条件的子元素，even表示偶数*/
background-color: #0000000b;
}
tbody tr:hover {
background-color: #fff6 ;
}
</style>
</head>
<body>
<main class="table">
<section class="header">
<h1 class="caption">强生集团主要产品一览</h1>
<div class="input-group">
<input type="search" placeholder="查找...">
<img src="images/search.png">
</div>
</section>
<section class="shell">
<table>
<thead>
<tr>
<th>产品名称</th>
<th>基本图片</th>
<th>产品售价</th>
<th>在售情况</th>
<th>参数描述</th>
<th>产品描述</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>QS pad</a></td>
<td><img src = " " alt = "强盛平板" width= "433"></td>
<td class="situation"><abbr title = "你知道的太多了">$1999(1999交个朋友)</abbr></td>
<td class="situation">在售</td>
<td>Q3芯片，512G内存，32G运行内存，10.9寸/12.8寸/15.6屏幕</td>
<td>
更快、更强、更炫。Q3芯片，性能飞跃，创意无限。Liquid Retina XDR显示屏，色彩惊艳，细节无可匹敌。<br><br>
QS Keyboard搭配Trackpad，工作更高效，娱乐更畅快。QS Pencil二代，无限创作，数字世界尽在掌握。<br><br>
轻薄便携，不拘一格。无论是工作、学习还是创作，QSPad Pro 2021都将领您走向未知，创造不可思议。<br><br>
QSPad Pro 2021，超越一切，开启创新之旅。
</td>
</tr>
</tr>
<tr>
<td>QS book</a></td>
<td><img src = " " alt = "这就是钟离" width= "433"></td>
<td class="situation">$8848</td>
<td class="situation">在售</td>
<td>50000毫安电池，128G内存，2T固态硬盘,500MHz刷新率,Q4芯片，64核处理器</td>
<td>
无与伦比的速度，震撼的显示，无穷的创意。QSBook，重新定义了您的工作和创作方式。<br><br>
搭载M1芯片，性能飙升，能量效率超群。Retina XDR显示屏带来绚丽的视觉体验，令您陶醉其中。<br><br>
轻薄便携，打破了边界。无论您是开发者、创意者还是专业人士，QSMacBook都将成为您创新之路上的伙伴。<br><br>
QS MacBook，为您的未来而生。性能、创新、无限可能。
</td>
</tr>
<tr>
<td class="item">QS手机</a></td>
<td><img src = "" alt = "这就是甘雨" width= "433"></td>
<td class="situation">$5888</td>
<td class="situation">馨售</td>
<td>Q3芯片，512G内存，32G运行内存，6.8寸屏幕</td>
<td>
当科技与美学完美融合,QS 12 Pro Max应运而生。这款智能手机不仅提供卓越的性能和功能，还拥有令人惊叹的外观。<br><br>
QS 12 Pro Max采用全新的陶瓷盖板，赋予手机更高的耐用性和奢华感。其6.7英寸超视网膜XDR显示屏为您呈现无与伦比的色彩和对比度。配备A14仿生芯片，您将体验到无与伦比的性能和效率。<br><br>
超感光LiDAR扫描仪和卓越的摄影系统将您的摄影技能提升至新的高度，即使在低光环境下也能捕捉清晰的照片和视频。<br><br>
QS 12 Pro Max，是精湛工艺和创新的杰作，让您超越自我，创造美丽的瞬间。这不仅是一款手机，更是您生活和创造力的伙伴。<br><br>
</td>
</tr>
<tr>
<td class="item">QS Pencil 2代</a></td>
<td><img src = " " alt = "这就是魈" width= "433"></td>
<td class="situation">$100</td>
<td class="situation">在售</td>
<td>3000Mhz电池</td>
<td>无需纸张，无需等待。QS Pencil（第二代）是数字创作的极致工具，让您的想法瞬间变为现实。高精度和低延迟的触控技术带来真实的书写和绘画体验。<br><br>
不仅支持无线充电，插入QS Pad上即可连接，立刻启动。智能感应技术让您能够一键切换工具，随时调整线条粗细和色彩。<br><br>
无论是草图、笔记还是艺术创作，QS Pencil 2都将成为您不可或缺的创作伙伴。<br><br>
突破创意的界限，探索无限可能。QS Pencil（第二代），创意的魔法之笔，等待您的启发。<br><br>
</td>
</tr>
<tr>
<td class="item">QS keybord</a></td>
<td><img src = " 没有url" alt = "这就是行秋" width= "433"></td>
<td class="situation">$85</td>
<td class="situation">在售</td>
<td>暂无参数</td>
<td>在触控的世界里，尽显轻松自如。苹果妙控键盘将科技与设计巧妙融合，让您的工作、创作与娱乐尽在指尖。超薄轻巧，便于携带，随时随地释放无限可能。<br><br>
独特的触控板设计，让您能够流畅操控，像使用魔术一样改写每一个动作。无论是办公任务还是创意设计，妙控键盘都能为您提供精准的控制和舒适的体验。<br><br>
全尺寸背光键盘，让您即便在昏暗的环境下也能无障碍工作。智能连接，瞬间启动，为您的数字生活增添便捷与高效。<br><br>
苹果妙控键盘，重新定义您与技术互动的方式，让创造力不再受限，畅享智能生活的精彩旅程！<br><br>
</td>
</tr>
<tr>
<td class="item">QS pord</a></td >
<td><img src= "" alt = "假装有图片" width= "433"></td>
<td class="situation">$150</td>
<td class="situation">在售</td>
<td>暂无参数</td>
<td>音质如临现场，降噪似进入宁静。QS Pro，让您沉浸在音乐的美妙世界，同时抵挡城市的嘈杂喧哗。<br><br>
智能降噪技术实时适应您的环境，为您带来真正的宁静。而透明模式则使您能够瞬间回到现实，不必摘下耳机即可倾听周围声音<br><br>
全新的设计，更舒适贴合您的耳朵，不易脱落。IPX4防水等级，适合运动、旅行，无拘无束。<br><br>
QS Pro，为音乐爱好者和生活的每个瞬间提供完美的音频体验。用音乐，靠近更多的美好。<br><br>
</td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html> 在你的代码中，.header 类选择器中的 text-align: center; 没有生效的原因可能是因为你在 .header 中使用了 display: flex;。在 Flexbox 布局中，text-align 属性不会对子元素产生影响，因为 Flexbox 有自己的对齐方式，即 justify-content 和 align-items。
如果你想让 .header 中的文本居中，你可以尝试以下方法：
1. 对 .header 中的子元素应用 text-align: center;。例如，如果你想让标题居中，你可以添加以下样式：
.header h1 {
text-align: center;
}
2. 使用 Flexbox 的对齐属性。如果你想让 .header 中的所有内容居中，你可以使用 justify-content: center; 和 align-items: center;。你已经在 .header 中使用了这两个属性，所以如果你的目标是让所有内容居中，那么你已经达到了这个目标。
请注意，这些解决方案可能需要根据你的具体需求进行调整。如果你能提供更多关于你希望如何对齐 .header 中的内容的信息，我可能能提供更具体的建议。
请注意，本回答来自GPT-4
如果问题已经解决，请设置最佳答案 Request failed with status code 400
球一个最佳答案谢谢啦！这对我非常重要！{:10_254:}{:10_254:}{:10_254:} 问题出在 .header 选择器上。在CSS中，选择器的优先级是根据其特定性进行计算的。在这段代码中， .header 选择器的特定性是1个类选择器，而其他选择器都没有类选择器。因此， .header 选择器的优先级最低，导致 text-align: center; 属性没有生效。
要解决这个问题，您可以提高 .header 选择器的特定性。例如，可以在 .header 选择器前添加一个元素选择器，如 section.header ，或者添加更多的类选择器，如 .table .header 。这样可以增加选择器的特定性，使其优先级更高，从而使 text-align: center; 属性生效。
修改后的代码示例：
<section class="header">
<h1 class="caption">强生集团主要产品一览</h1>
<div class="input-group">
<input type="search" placeholder="查找...">
<img src="images/search.png">
</div>
</section>
section.header {
width: 100%;
height: 10%;
text-align: center;
background-color: #fff4;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
这样修改后， .header 选择器的特定性增加了， text-align: center; 属性将会生效。
页:
[1]