HTML/CSS实现视频叠加响应式标题 解决多端适配左对齐问题

你当前标题无法左对齐、调整位置就破坏响应式的核心原因，是原有.title的定位逻辑本身就是水平居中逻辑：left: 50%配合transform: translate(-50%,-50%)的写法，作用就是把绝对定位元素固定在父容器的水平+垂直正中心，此时标题元素宽度完全由文字内容撑开，既不贴靠父容器左侧，也没有占满父容器宽度，写text-align: left自然不会产生预期效果。如果硬写固定百分比的left值，不同屏幕宽度下父容器尺寸变化，必然会出现位置偏移，直接破坏响应式效果。

只需要调整.title的定位规则，去掉水平居中相关的偏移属性，让元素贴靠父容器左侧，仅保留垂直居中逻辑，再用固定内边距控制标题和视频边缘的间距即可，不需要写任何百分比水平偏移：

修正后的完整CSS代码 #

.video-container { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;       
} 
.vcontainer { 
    width: 100%; 
    height: 240px;
    position: relative; 
    margin-bottom: 2%; 
    overflow: hidden;         
} 
.title { 
    width: 100%;
    position: absolute; 
    font-family: "Monument Grotesk Variable", Icons; 
    font-size: clamp(16px, 2vw, 32px);
    font-style: normal; 
    font-weight: 400; 
    font-variation-settings: 'slnt' 0, 'MONO' 0; 
    animation-duration: 1.5s; 
    animation-name: slidein; 
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    padding-left: 24px;
    z-index: 3; 
}
.title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
}
#vid1{
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

关键修改说明 #

• 移除原.title中水平居中的left: 50%和水平方向位移逻辑，仅保留垂直方向的居中偏移，让标题元素从父容器最左侧开始排布
• 给.title设置width: 100%占满整个父容器宽度，此时text-align: left会直接作用于内部文字，实现稳定的左对齐效果
• 用固定px值的padding-left控制标题和视频左边缘的间距，这个数值不会随屏幕宽度变化产生比例偏移，宽屏、移动端下标题和边缘的距离都能保持一致
• 将视频高度改为100%跟随父容器自适应，新增object-fit: cover保证视频比例正确，不会出现拉伸变形
• 新增clamp()限制字体大小范围，避免移动端字体过小、超宽屏字体过大的问题，你可以根据自己的设计需求调整三个参数（最小字号、理想字号、最大字号）
• 给.vcontainer新增overflow: hidden，避免视频缩放时超出容器边界

注意：你提供的HTML代码里，标题的a标签href属性末尾多了冗余的转义字符和闭合尖括号，记得清理，否则会导致链接跳转失效。

内容的提问来源于stack exchange，提问作者Chronis Efk