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:左和右，但失败了。因为我需要我的版权文本在页脚中间对齐，如上面所示。

如有任何指导，将不胜感激。

Answer 1

关于你想要实现你想要的东西，有很多方法。

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

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

您可以尝试使用。

​

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。

​

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

此外，请参阅此链接，以获取媒体规则\ CSS媒体规则

希望这能有所帮助