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> 

有关网格和Flexbox的更多信息。 请参阅此链接CSS Flexbox | CSS网格

另请参阅此链接以获取媒体规则| CSS媒体规则

希望这可以帮助