Div 在添加 HREF 时不对齐

Question

我有一排三张图片，它们应该居中对齐，因此与下方相应的 div 对齐。每张图片都有自己的 Div。它们完美对齐，但是，当我向它们添加 HREF 时，它们都向左移动，我不明白为什么。有人可以阐明如何解决这个问题吗？

JSfiddle：https://jsfiddle.net/DcoltGaming/ap2jd1xh/7/

HTML:

<div class="contactUsContainer">
            <a href="">
    <div class="ContactUsBox"> 
         <img src="https://img.icons8.com/plasticine/48/000000/phone.png">
    </div>
            </a>


    <a href="">
    <div class="emailIconBox">
    <img src="https://img.icons8.com/nolan/48/email.png">
          </div> 
          </a>


                 <a href="">
              <div class="IMBox"> 
         <img src="https://img.icons8.com/android/48/000000/computer.png">
    </div>  
  </a>


          </div>   

        <div class="contactUsMethodInfoContainer">
              <div class="phoneInfo">
                  <p>Some info about a phone.</p>
              </div>

              <div class="IMInfo">
                  <p>Some info about Social media</p>
              </div>

              <div class="emailInfo">
                  <p>Some info about emails.</p>
              </div>
          </div>

CSS

 .contactUsContainer{
    display: flex;
    align-items: center;
    height: 100%;
}

.ContactUsBox{
    width: 25%;
    height: 100%;
    margin: auto;
}


.emailIconBox{
    width: 25%;
    height: 100%;
    margin: auto;
}

.IMBox {
    width: 25%;
    height: 100%;
    margin: auto;
}

.contactUsMethodInfoContainer {
    display: flex;
    align-items: center;
    height: 100%;
}

.phoneInfo{
    width: 25%;
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.IMInfo{
    width: 25%;
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.emailInfo{
    width: 25%;
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

Answer 1

你需要给标签 CSS 你给你的 ...Box 元素。

.contactUsContainer > a {
    width: 25%;
    height: 100%;
    margin: auto;
}

或者给所有标签一个 class 并以此方式设置样式

<a class="linkBox" />
.linkBox {
    width: 25%;
    height: 100%;
    margin: auto;
}

Working Fiddle

Answer 2

您的 contactUsContainer 设置为 flex，并且 flex 始终作用于其直接子项。在 a 标签之前，子标签是 ContactUsBox、emailIconBox 和 IMBox。添加 a 标签后，a 标签将成为直接子标签。要解决这个问题，您需要将所需的属性添加到 a 标签中：

.contactUsContainer {
  display: flex;
  align-items: center;
  height: 100%;
}

a {
  width: 25%;
  height: 100%;
  margin: auto;
}

.contactUsMethodInfoContainer {
  display: flex;
  align-items: center;
  height: 100%;
}

.phoneInfo {
  width: 25%;
  height: 100%;
  margin: auto;
  text-align: center;
  padding-top: 1.5%;
}

.IMInfo {
  width: 25%;
  height: 100%;
  margin: auto;
  text-align: center;
  padding-top: 1.5%;
}

.emailInfo {
  width: 25%;
  height: 100%;
  margin: auto;
  text-align: center;
  padding-top: 1.5%;
}

<div class="contactUsContainer">
  <a href="">
    <div class="ContactUsBox">
      <img src="https://img.icons8.com/plasticine/48/000000/phone.png">
    </div>
  </a>


  <a href="">
    <div class="emailIconBox">
      <img src="https://img.icons8.com/nolan/48/email.png">
    </div>
  </a>


  <a href="">
    <div class="IMBox">
      <img src="https://img.icons8.com/android/48/000000/computer.png">
    </div>
  </a>


</div>

<div class="contactUsMethodInfoContainer">
  <div class="phoneInfo">
    <p>Some info about a phone.</p>
  </div>

  <div class="IMInfo">
    <p>Some info about Social media</p>
  </div>

  <div class="emailInfo">
    <p>Some info about emails.</p>
  </div>
</div>

Answer 3

既然您使用的是 display: flex，我是否可以建议您将 width 全部抛弃，而是依靠 flexbox 属性来处理您的布局？

只需添加 justify-content: space-around; 即可获得您想要的效果：

https://jsfiddle.net/cu5k70e4/

CSS（宽度在 children 上删除，justify-content 应用于 parents）：

.contactUsContainer{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}

.ContactUsBox{
    height: 100%;
    margin: auto;
}


.emailIconBox{
    height: 100%;
    margin: auto;
}

.IMBox {
    height: 100%;
    margin: auto;
}

.contactUsMethodInfoContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.phoneInfo{
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.IMInfo{
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.emailInfo{
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

Div 在添加 HREF 时不对齐

Div's moving out of alignment when HREF added

html

css

href