如何在Popup Modal中居中一行3个图标并实现响应式？

你之前通过手动调整left百分比来居中图标的方案，会因为不同屏幕宽度下图标总宽度变化导致偏移。下面用更可靠的容器包裹+布局属性来实现完美居中，同时优化整体响应式表现：

步骤1：调整HTML结构 #

给三个社交媒体图标添加一个容器，方便统一控制布局：

<section class="popup-modal">
    <div class="popup-box">
        <div class="popup-image-container">
            <div class="popup-img"></div>
        </div>
        <div class="popup-content">
            <div class="popup-close">&times;</div>
            <h1>FOLLOW US ON SOCIAL MEDIA</h1>
            <p>@gravitasdesign</p>
            <h3>Learn about our current and upcoming projects.</h3>
            <!-- 添加图标容器 -->
            <div class="social-icons">
                <a href="#"> <i id="popup-facebook" class="bi bi-facebook"></i></a>
                <a href="#"> <i id="popup-instagram" class="bi bi-instagram"></i></a>
                <a href="#"> <i id="popup-linkedin" class="bi bi-linkedin"></i></a> 
            </div>
        </div>
    </div>
</section>

步骤2：修改CSS样式 #

移除手动定位的left属性，改用布局属性实现居中，同时补充响应式适配：

.popup-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1099;
    background-color: rgba(0, 0, 0, 0.8);
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}

.popup-modal.show {
    visibility: visible;
    opacity: 1;
}

/* 修改弹窗宽度为响应式 */
.popup-box {
    background-color: #fff;
    max-width: 750px;
    width: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    border-radius: 2.5px;
}

.popup-image-container{
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    overflow: hidden;
}

.popup-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(images/popupmodal.jpg);
    background-size: cover;
    background-position: left;
    animation: zoomInOut 50s linear infinite;
}

@keyframes zoomInOut{
    0%,100%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
}

.popup-content {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 30px;
}

.popup-content h1{
    font-family: interstate, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 36px;
    text-align: center;
    line-height: 55px;
    word-spacing: 4px;
    color: #300600;
}

.popup-content h3{
    font-family: interstate, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    color: #300600;
    padding-bottom: 35px;
}

.popup-content p {
    font-family: 'interstate', sans-serif;
    font-weight: 700;
    padding-top: 30px;
    padding-bottom: 35px;
    text-align: center;
    font-size: 28px;
    line-height: 42.5px;
    color: #300600;
}

/* 新增图标容器样式，实现居中 */
.social-icons {
    text-align: center;
    /* 或者用flex布局更灵活：
    display: flex;
    justify-content: center;
    gap: 48px;
    */
}

/* 移除手动定位的left属性，保留其他样式 */
#popup-facebook, #popup-instagram, #popup-linkedin{
    font-size: 32px;
    margin-right: 24px;
    margin-left: 24px;
    transition: 0.2s ease-in-out;
}

#popup-facebook{
    color: #4267B2;
}

#popup-linkedin{
    color: #0077b5;
}

#popup-instagram {
    color: #0077b5; 
}

.popup-close {
    font-size: 32px;
    position: absolute;
    left: 96%;
    top:  1%;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    color: #300600;
}

/* 响应式适配：小屏幕下图文区域上下排列 */
@media (max-width: 600px) {
    .popup-image-container,
    .popup-content {
        flex: 100%;
        max-width: 100%;
    }
    .popup-close {
        left: 90%;
    }
}

关键修改说明 #

1. 容器包裹图标：用.social-icons统一管理三个图标，避免单独定位的局限性
2. 移除固定定位：删除left:9.5%这类硬编码的定位值，改用text-align:center或Flex布局实现自适应居中
3. 弹窗响应式优化：将popup-box的width改为max-width:750px; width:90%，确保小屏幕下不会超出可视区域
4. 小屏幕适配：通过媒体查询让图片和内容区域在窄屏时堆叠排列，优化移动端体验

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