有没有办法使单个 <div> 内容垂直居中而不影响 <div> 兄弟的内容？

Posted 2023-03-05

【中文标题】有没有办法使单个 <div> 内容垂直居中而不影响 <div> 兄弟的内容？

【英文标题】：Is there a way of centering a single <div> contents vertically without affecting the contents of the <div> sibling?

【发布时间】：2019-12-24 05:03:08

【问题描述】：

Image showing the expected alignment on the last div 我有多个 div 环绕在显示设置为 flex 的父级周围。 我希望垂直对齐（如在vertical-align:middle中）并且还水平对齐（如在text-align:center中）将仅放入最后一个 div 的任何内容，，例如隐私政策、使用条款、社交媒体按钮等，而不会影响当前按预期显示的其他兄弟。

我尝试将父级设置为显示为 flex，并将 justify-content 和 align-items 设置为居中，但它影响了所有子级 - 不仅仅是 LAST DIV（这不是我想要的）。

使用垂直对齐：中间；好像也没用。

这是样式表：

#footer-container
        width:100%; min-height: 200px;
        background: lightblue; border:2px solid blue;
        
        #div-wrap
            display: flex; flex-flow: row wrap; justify-content: space-between;

            font-size:1rem;
            width:95%;
            margin: 0 auto;
            
            #div-wrap div
                border:2px solid red;
                min-width:200px; height: 200px;
                margin:4px auto; padding: 0 3px;
                display: inline-block; 
                font-size: 1.3rem;
                
                h5
                    font-size:1.125rem;
                    padding:5px;margin:0px;
                    

 /*  The code below can be modified for the question...  */
            .terms
                width: 300px; background-color: yellow;
                color:green; font-weight: bolder; text-align: center;
                vertical-align: middle; /* Does;nt work, dont know why */
                margin-left: auto; margin-right: 6px;
                

<section id="footer-container">
             <div id="div-wrap" >

                <div>
                    <h5>Quick Link Title</h5>
                    <ul> </ul>
                </div>
                <div>
                    <h5>Quick Link Title</h5>
                    <ul> </ul>
                </div>
                <div>
                    <h5>Quick Link Title</h5>
                    <ul> </ul>
                </div>
                <div>
                    <h5>Quick Link Title</h5>
                    <ul> </ul>
                </div>

                <div class="terms" >

                    <p><small>Copywrite &copy;2019. All right reserved</small></p>

                </div>

            </div>
        </section>

【问题讨论】：

我多次阅读您的问题，但仍然不确定您要达到的目标。另外，请格式化您的代码，以便其他人更容易帮助您。

谢谢。请查看我附在问题中的图片和 codepen 上的代码：codepen.io/Keleoswilliam/pen/yLBJrMy 谢谢。

【参考方案1】：

你的意思是这样的吗？

#footer-container 
  width: 100%;
  min-height: 200px;
  background: lightblue;
  border: 2px solid blue;


#div-wrap 
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  font-size: 1rem;
  width: 95%;
  margin: 0 auto;


#div-wrap > div 
  border: 2px solid red;
  min-width: 200px;
  height: 200px;
  margin: 4px auto;
  padding: 0 3px;
  display: inline-block;
  font-size: 1.3rem;


h5 
  font-size: 1.125rem;
  padding: 5px;
  margin: 0px;


#div-wrap div.terms 
  width: 300px;
  background-color: yellow;
  height: 200px;
  color: green;
  font-weight: bolder;
  text-align: center;
  margin: 4px auto;
  padding: 0 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;


.footer div 
height: 70px;
display: flex;
justify-content: center;
align-items: center;


.icon 
margin: 3px;

<section id="footer-container">
  <div id="div-wrap">

    <div>
      <h5>Quick Link Title</h5>
      <ul> </ul>
    </div>
    <div>
      <h5>Quick Link Title</h5>
      <ul> </ul>
    </div>
    <div>
      <h5>Quick Link Title</h5>
      <ul> </ul>
    </div>
    <div>
      <h5>Quick Link Title</h5>
      <ul> </ul>
    </div>

    <div class="terms footer">
     <div><span class='icon'>fb</span><span class='icon'>twitter</span><span class='icon'>other</span></div>
     <div><p><small>Copywrite &copy;2019. All right reserved</small></p></div>
     <div>Other info </div>
    </div>

  </div>
</section>

【讨论】：

好的，谢谢。这正是我想要实现的，但我注意到当我向最后一个 div 添加更多内容时，它会破坏预期的格式。更新：我在原始问题中包含了一张图片，描述了我想要实现的目标......

@KeleosWilliam 您能否更新您的代码以复制您正在尝试的内容？

谢谢cccn，类似的。我将使用更新的代码在 codepen 上进行尝试：codepen.io/Keleoswilliam/pen/yLBJrMy