[英]CSS Aligning Images Along Side Text
這個問題可能被問了一百萬遍。 但是,我似乎無法找到解決問題的答案。
我的頁腳中包含對齊的版權文字,並且我嘗試在其右側添加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,但是失敗了。 由於我需要將版權文本在頁腳中間對齊,如上所示。
任何指導將不勝感激。
您可以通過多種方式實現自己想要的目標。
一旦屏幕太小而無法包含版權和徽標,我想將徽標移到版權下方。
您將需要使用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媒體規則
希望這可以幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.