Question

使用以下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;}

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

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

Answer 1

我相信你在寻找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>

页脚对齐问题

1 个答案: