移动端浏览器下HTML/CSS：Label适配页面宽度及标题居中方案

云上老周

2026-8-6

解决手机端页面被table限制的适配问题

核心问题原因

你的table设置了固定宽度width:1000px，在手机端屏幕宽度远小于1000px时，页面会被强行撑宽以容纳表格，导致其他元素（h1、label）的宽度参考被拉宽的页面而非真实设备宽度，最终出现视觉上的居中异常。

具体修复步骤

添加视口元标签（必须）
在HTML的<head>中加入以下代码，让浏览器以设备真实宽度渲染页面：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

修改table的响应式样式
去掉固定宽度，改用最大宽度限制，并确保表格内容在窄屏幕下自动换行：

table {
    text-align: center;
    font-size: 20px;
    margin: auto;
    border: 3px solid darkblue;
    border-collapse: separate;
    border-spacing: 5px 10px;
    width: 100%; /* 占满容器宽度 */
    max-width: 1000px; /* 最大宽度不超过原设定的1000px */
}

/* 让表格单元格内容自动换行，避免溢出 */
table td, table th {
    word-break: break-all;
    overflow-wrap: break-word;
}

调整label的样式，确保基于真实页面宽度布局
label默认是行内元素，width属性无法生效，需改为块级元素，并设置自动水平居中：

label {
    display: block; /* 转为块级元素，使width生效 */
    width: 95%;
    font-size: 250%;
    margin: 1% auto; /* 上下1%边距，水平自动居中 */
    white-space: pre-wrap;
    text-align: justify;
    font-weight: bold;
}

优化h1的手机端显示
原font-size:340%在手机端会过大，可通过媒体查询调整：

h1 {
    color: #0b2e13;
    text-align: center;
    font-size: 340%;
}

/* 屏幕宽度小于768px时调整标题字号 */
@media (max-width: 768px) {
    h1 {
        font-size: 200%;
    }
}