Question

Image showing the expected alignment on the last div我在显示设置为flex的父项周围有多个div换行。我要垂直对齐（如vertical-align：middle），并且也要水平对齐（如text-align：center）仅可放入LAST div的任何内容，例如隐私权政策，使用条款，社交媒体按钮等，而不会影响当前按预期显示的其他同级内容。

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

使用vertical-align：middle;似乎也不起作用。

这是样式表：

#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>

Answer 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>内容垂直居中而不影响<div>同级内容？

1 个答案: