涉及到 flex 时的对齐问题答案

【问题标题】：Issues with alignment when it comes to flex涉及到 flex 时的对齐问题
【发布时间】：2021-07-20 14:55:03
【问题描述】：

我的 flex 有两个问题需要帮助解决。我在这里创建了一个小提琴来访问：https://jsfiddle.net/dmj5yscz/

问题 1：我无法将元素移动到中心（见屏幕截图中的红色）。在各个地方尝试了 margin-left:auto 和 margin-right:auto 但没有运气。（注意：仅当宽度不超过 1144 像素时才会发生）

问题 2：我希望文本在中心垂直对齐（任何屏幕宽度）

代码如下：

    <!-- newsletter section -->
    
    <div class="newsletter_section">
    <div class="newsletter_inner_section">
    <div class="newsletter_left content-box">
    <img src="xxx">
    </div>
        <div class="newsletter_mobile_col">
    <div class="newsletter_center content-box">
    <p class="newsletter_text_section">Text1 </p>
            </div>
    <p class="newsletter_input_section">Text2 </p>
    </div>
    </div>
    </div>
    
    /* newsletter section */
    
    .newsletter_inner_section{
        display:flex;
    }
    
    .newsletter_gif{
        width:150px;
        height:auto;
    }
    
    .newsletter_left,
    .newsletter_center,
    .newsletter_right{
        display:inline-flex;
    }
    
    .newsletter_left{
        width:auto;
    }
    
    .newsletter_center{
        width:100%;
    }
    
    .newsletter_right{
        width:40%;
        justify-content:flex-end;
    }
    
    .newsletter_text_section{
        color:black !important;
        font-size:20px !important;
        font-weight:bold;
    }
    
    /* Media Newsletter section only */
    
@media (max-width:1144px){
    
    .newsletter_right,
    .newsletter_center{
        width:auto;
    }
        
    .content-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
    }
        
    .newsletter_inner_section{
        justify-content:center;
        display: flex;
        flex-direction:row;
    }
    
    .newsletter_text_section{
        padding-left:15px;
        margin-bottom:0;
    }
        
    .newsletter_mobile_col {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }
    
}
    
    @media (max-width:565px){
        
        .newsletter_inner_section{
        flex-direction:column;
        }
        
        .newsletter_left{
            margin-left:auto;
            margin-right:auto;
        }
        
    .newsletter_gif{
        padding-bottom:20px;
    }
        
    }

【问题讨论】：

标签： html css

【解决方案1】：

您已设置：flex-grow:1;，它正在使第二个 flex-div 占用可用空间。请删除它，它将居中对齐

.newsletter_mobile_col {
    /* flex-grow: 1; */
    display: flex;
    flex-direction: column;
}

是的，在 flex 容器上使用 align-items:center; 使其中心对齐跨轴。

@media (max-width: 1144px){
 .newsletter_inner_section {
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;/* here */
   }
}

如果你想在所有屏幕上表现，只需在媒体查询之外编写上面的 CSS :)

【讨论】：

啊，我认为 flex-grow 是不同的，但是是的，这很完美，谢谢 :)

【解决方案2】：

将弹性项目显示在中心

Flexbox link （证明内容）

第二个，设置另一个显示弹性：弹性方向列并居中

【讨论】：