html - CSS 沿边文本对齐图像

Question

这个问题可能已被问过一百万次；但是，我似乎找不到问题的答案。

我有一个包含对齐版权文本的页脚，我想在它的右侧添加 3 个 Logo (没有换行符)。一旦屏幕太小无法包含版权和 Logo ，我想将 Logo 移到版权下方。

<footer>

        <div class="legal">
            <a href="#" target="_blank"><B>PRIVACY NOTICE</B></a> |
            <a href="#" target="_blank"><B>LEGAL NOTICE</B></a>

            <p>
                Trademark text
            </p>

            <br />
            <p>
                Copyright text
            </p>
        </div>

        <div class="logos">
            <a href="#" target="_blank">
            <img src="logo1.png" />
            </a>

            <a href="#" target="_blank">
                <img src="logo2.png" />
            </a>
            <a href="#" target="_blank">
                <img src="logo3.png" />
            </a>       
        </div>

</footer>

我尝试将版权和 Logo 包装在两个单独的 div 中并使用 float: left 和 right 但失败了。因为我需要我的版权文本在页脚中间对齐，如上所示。

任何指导将不胜感激。

Answer 1

有多种方法可以实现您想要的目标。

Once the screen is too small to contain the copyright and the logos, I want to move the logos below the copyright.

您将需要使用 CSS 媒体规则来实现这一点。

您可以尝试使用 CSS Flexbox。

footer{
  width:100%;
  display:flex;
  flex-flow: row wrap;
  align-items:center;
}

.legal{
  width:80%;
  text-align:center;
}

.logos{
  width:20%;
  text-align:right;
}

@media screen and (max-width:800px){
  .legal{
   width:100%; 
  }
  .logos{
   width:100%;
   text-align:center;
  }
}

<footer>
  <div class="legal">
    <a href="#" target="_blank"><B>PRIVACY NOTICE</B></a> |
    <a href="#" target="_blank"><B>LEGAL NOTICE</B></a>

    <p>
      Trademark text
    </p>
    <p>
      Copyright text
    </p>
  </div>

  <div class="logos">
    <a href="#" target="_blank">
      <img src="logo1.png" />
    </a>
    <a href="#" target="_blank">
      <img src="logo2.png" />
    </a>
    <a href="#" target="_blank">
      <img src="logo3.png" />
    </a>       
  </div>
</footer>

您可以尝试使用 CSS Grid。

footer{
  width:100%;
  display:grid;
  grid-template-rows: 1fr;
  grid-template-columns: 80% 1fr;
  align-items: center;
}

.legal{
  text-align:center;
}

.logos{
  justify-self: end;
}

@media screen and (max-width: 800px){
  footer{
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
  }
  .logos{
  justify-self: center;
  }
}

<footer>
  <div class="legal">
    <a href="#" target="_blank"><B>PRIVACY NOTICE</B></a> |
    <a href="#" target="_blank"><B>LEGAL NOTICE</B></a>

    <p>
      Trademark text
    </p>
    <p>
      Copyright text
    </p>
  </div>

  <div class="logos">
    <a href="#" target="_blank">
      <img src="logo1.png" />
    </a>

    <a href="#" target="_blank">
      <img src="logo2.png" />
    </a>
    <a href="#" target="_blank">
      <img src="logo3.png" />
    </a>       
  </div>
</footer>

有关 Grid 和 Flexbox 的更多信息。请查看此链接 CSS Flexbox | CSS Grid

另请参阅此链接以了解媒体规则 | CSS Media Rule

希望对你有帮助