CSS沿着侧面文本对齐图像

Question

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

我有一个包含对齐的版权文本的页脚，我正在尝试在其右侧添加3个徽标（没有换行符）。一旦屏幕太小而无法包含版权和徽标，我想将徽标移到版权之下。

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

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

非常感谢任何指导。

Answer 1

您可以通过各种方式实现自己想要的目标。

  

一旦屏幕太小而无法包含版权和徽标，我   想要将徽标移到版权之下。

您需要使用CSS Media规则来实现这一目标。

您可以尝试使用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

另请参阅Media Rule的此链接CSS Media Rule

希望这有帮助