本文介绍了页脚对齐问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用以下CSS在网站上创建了一个页脚。
.footer_wrap {width:100%;最大宽度:100%;背景:#551155;}$ b
.footer_content {padding:10px; display:flex; font-size:12px; margin-left:
90px; margin-right:90px;}
.footer_nav {width:150px; h1 {color:white; font-size:20px;}}
ul {margin:0; padding:11px;}
.footer-social {text-align:center;}
.footer-social li {display:inline;}
这是html
< div class =footer_wrap >
< div class =footer_content>
< nav class =footer_nav>
< h1>套件< / h1>
< ul>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< / ul>
< / nav>
< nav class =footer_nav>
< h1>索赔< / h1>
< ul>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< / ul>
< / nav>
< nav class =footer_nav>
< h1>政策< / h1>
< ul>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< / ul>
< / nav>
< nav class =footer_nav>
< h1>帐单< / h1>
< ul>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< / ul>
< / nav>
< nav class =footer_nav>
< h1>模板< / h1>
< ul>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< / ul>
< / nav>
< nav class =footer_nav>
< h1>社区< / h1>
< ul>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< li>< a href =url>链接文字< / a>< / li>
< / ul>
< / nav>
< / div>
< div class =footer-social>
< ul>
< li>< a href =http://www.facebook.com>< img src ='https:// prod.mindtouch.us/@api/deki/files/196 /Facebook.png?origin=mt-web'/>< / a>< / li>
< li>< a href =http://www.youtube.com>< img src ='https://prod.mindtouch.us/@api/deki/files/254 /Youtube.png?origin=mt-web'/>< / a>< / li>
< li>< a href =http://www.twitter.com>< img src =https://prod.mindtouch.us/@api/deki/files/253 /Twitter.png?origin=mt-web/>< / a>< / li>
< li>< a href =http://www.twitter.com>< img src =https://prod.mindtouch.us/@api/deki/files/255 /LinkedIn.png?origin=mt-web/>< / a>< / li>
< / ul>
< / div>
当我最小化页面时,页脚链接对齐左侧。即使页面被最小化或最大化,我也希望它始终处于中心位置。任何帮助将不胜感激?
解决方案
我相信你正在寻找
.footer_wrap {width:100%;最大宽度:100%;背景:#551155; } .footer_content {padding:10px;显示:flex;证明内容:中心; font-size:12px; margin-left:90px; margin-right:90px; } .footer_nav {width:150px; h1 {color:white; font-size:20px; }} ul {margin:0; padding:11px; } .footer-social {text-align:center; } .footer-social li {display:inline; } < div class =footer_wrap> < div class =footer_content> < nav class =footer_nav> < H1>套房< / H1> < UL> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < / UL> < / NAV> < nav class =footer_nav> < H1>权利要求< / H1> < UL> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < / UL> < / NAV> < nav class =footer_nav> < H1>政策< / H1> < UL> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < / UL> < / NAV> < nav class =footer_nav> < H1>结算与LT; / H1> < UL> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < li>< a href =url>链接文字< / a> < /锂> < / UL> < / NAV> < nav class =footer_nav> < H1>模板和LT; / H1> < ul>
Have created a footer on a website using the following CSS.
.footer_wrap {width:100%; max-width:100%; background:#551155;} .footer_content {padding:10px; display:flex;font-size:12px;margin-left: 90px;margin-right: 90px;} .footer_nav {width:150px; h1{color:white;font-size: 20px;}} ul{ margin:0; padding: 11px;} .footer-social { text-align:center;} .footer-social li {display:inline;}
This is the html
<div class="footer_wrap"> <div class="footer_content"> <nav class="footer_nav"> <h1>Suite</h1> <ul> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> </ul> </nav> <nav class="footer_nav"> <h1>Claims</h1> <ul> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> </ul> </nav> <nav class="footer_nav"> <h1>Policy</h1> <ul> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> </ul> </nav> <nav class="footer_nav"> <h1>Billing</h1> <ul> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> </ul> </nav> <nav class="footer_nav"> <h1>Templates</h1> <ul> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> </ul> </nav> <nav class="footer_nav"> <h1>Community</h1> <ul> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> <li><a href="url">link text</a></li> </ul> </nav> </div> <div class="footer-social"> <ul> <li><a href="http://www.facebook.com"><img src='https:// prod.mindtouch.us/@api/deki/files/196/Facebook.png?origin=mt-web' /></a></li> <li><a href="http://www.youtube.com"><img src='https://prod.mindtouch.us/@api/deki/files/254/Youtube.png?origin=mt-web' /></a></li> <li><a href="http://www.twitter.com"><img src="https://prod.mindtouch.us/@api/deki/files/253/Twitter.png?origin=mt-web" /></a></li> <li><a href="http://www.twitter.com"><img src="https://prod.mindtouch.us/@api/deki/files/255/LinkedIn.png?origin=mt-web" /></a></li> </ul> </div>
When I minimize the page the footer links aligns to the left. I would like it to be in the centre consistently even when the page is minimized or maximized. Any help would be appreciated?
解决方案
i believe you are looking for justify-content:center;
.footer_wrap { width: 100%; max-width: 100%; background: #551155; } .footer_content { padding: 10px; display: flex; justify-content:center; font-size: 12px; margin-left: 90px; margin-right: 90px; } .footer_nav { width: 150px; h1 { color: white; font-size: 20px; } } ul { margin: 0; padding: 11px; } .footer-social { text-align: center; } .footer-social li { display: inline; }
<div class="footer_wrap"> <div class="footer_content"> <nav class="footer_nav"> <h1>Suite</h1> <ul> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> </ul> </nav> <nav class="footer_nav"> <h1>Claims</h1> <ul> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> </ul> </nav> <nav class="footer_nav"> <h1>Policy</h1> <ul> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> </ul> </nav> <nav class="footer_nav"> <h1>Billing</h1> <ul> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> <li><a href="url">link text</a> </li> </ul> </nav> <nav class="footer_nav"> <h1>Templates</h1> <ul>
这篇关于页脚对齐问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!