diff --git a/css/index.css b/css/index.css index e178cd2..5044f8b 100644 --- a/css/index.css +++ b/css/index.css @@ -25,29 +25,29 @@ top: 0; width: 100%; height: 100%; - display: flex; - /* 整体文案块垂直方向居中,由内层 section-content 控制 */ - align-items: stretch; /* 需要盖在 swiper-slide 之上,swiper 本身 z-index: 1,这里抬高一层 */ z-index: 10; pointer-events: none; } .banner-cont .banner-text .section-content { - /* 让首页 banner 文案相对于视口靠左、垂直居中 */ - display: flex; - align-items: center; /* 垂直居中 */ + /* 相对定位,便于内部文案块绝对居中定位 */ + position: relative; height: 100%; - padding: 0 20px; /* 与全站保持左右 20px 内边距 */ - /* 保持与下方 .section-content 区块相同的水平居中和宽度,保证左右对齐 */ - margin: 0 auto; + padding: 0 20px; /* 左右 20px 内边距,与全站一致 */ + margin: 0 auto; /* 保持与其他 section-content 一致的水平布局 */ } .banner-copy { max-width: 560px; text-align: left; - /* 与下方 .banner-item 内的文案左对齐(banner-list padding 20px + item padding 60px) */ - padding-left: 60px; + /* 绝对定位:在整块 banner 内垂直居中,水平方向与下方卡片文案左侧对齐 */ + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + /* 与下方 .banner-item 内的文案左对齐(section-content padding 20px + item padding 60px) */ + padding-left: 80px; } .banner-copy #bannerTitle {