Question

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tyler</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <a href="index.html" class="header-brand">bioxm</a>
      <nav>
        <ul>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="about.html">About Me</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
        <a href="cases.html" class="header-cases">Cases</a>
      </nav>
    </header>
    <main>
      <section class="index-banner">
        <div class="vertical-center">
        <h2>I AM A FREELANCE WEB DEVELOPER</h2>
        <h1>With specialty in back-end development, functionality, UX design, and Search Engine Optimization</h1>
      </div>
      </section>
      <section class="index-links">
      <a href="cases.html">
        <div class="index-boxlink-square">
          <h3>Cases</h3>
        </div>
       </a>
      <a href="#">
          <div class="index-boxlink-rectangle">
            <h3>Portfolio</h3>
          </div>
         </a>
      <a href="#">
          <div class="index-boxlink-square">
            <h3>Bioxm</h3>
          </div>
         </a>
      <a href="#">
          <div class="index-boxlink-rectangle">
            <h3>Youtube</h3>
          </div>
         </a>
      <a href="#">
          <div class="index-boxlink-square">
            <h3>About</h3>
          </div>
         </a>
      <a href="#">
          <div class="index-boxlink-square">
            <h3>Contact</h3>
          </div>
        </a>
      </section>
    </main>
    <footer>
      <ul class="footer-links-main">
        <li><a href="#">Home</a></li>
        <li><a href="#">Cases</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="footer-sm">
        <a href="https://twitter.com/i/moments?lang=en">
          <img src="images/twitter.png" alt="twitter icon">
        </a>
    </footer>
  </section>
  </body>
</html>

我试图将img（div类“ footer-sm”）居中放置在列表（footer-links-main）对面的footer标签中，但我可以使图像在底部左右移动不会超过我的列表项。 flex box是实现此目的的最佳方法吗？

这是我的CSS https://pastebin.com/sv3XKhDs

在页脚中水平居中放置图像

0 个答案: