页脚对齐问题 [英] Footer Alignment Issues

查看：113
本文介绍了页脚对齐问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用以下CSS在网站上创建了一个页脚。 

  .footer_wrap {width：100％;最大宽度：100％;背景：＃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;}
$ b

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

当我最小化页面时，页脚链接对齐左侧。即使页面被最小化或最大化，我也希望它始终处于中心位置。任何帮助将不胜感激？

解决方案

我相信你正在寻找 justify-content：center;

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

这篇关于页脚对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆