html - 在文本下方对齐图像

Question

如何在文本下方对齐图片，而不让图片位于文本右侧？

我正在使用 flexbox在列中显示图标/链接。但在此之下，我希望图像在文本段落下方居中。

我已经尝试使用 clear 但没有任何改变。

a:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
  font-size: 75%;
}
a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
  font-size: 75%;
}
a:hover {
  color: #9700bd;
  background-color: transparent;
  text-decoration: underline;
  font-size: 75%;
}
a:active {
  color: #9700bd;
  background-color: transparent;
  text-decoration: none;
  font-size: 75%;
}

footer ul {
  list-style: none;
  text-align: center;
}
footer div div {
  margin: 0 auto;
  display: inline-block;
}
footer > div {
  /*margin-left: 25%;*/
  display: flex;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
  <div>
    <div>
      <ul>
        <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a></li>
        <li><a href="http://twitter.com/itzjavacraft" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a></li>
        <li><a href="http://instagram.com/itzjavacraft" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a></li>
        <li><a href="https://vine.co/u/1269681750234615808" target="_blank"><i class="fa fa-vine" aria-hidden="true"></i> Vine</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="https://youtube.com/channel/UCZhk1PN4RzBXe63bqg0GtHw" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i> YouTube</a></li>
        <li><a href="http://twitch.tv/itzjavacraft" target="_blank"><i class="fa fa-twitch" aria-hidden="true"></i> Twitch</a></li>
        <li><a href="http://soundcloud.com/itzjavacraft" target="_blank"><i class="fa fa-soundcloud" aria-hidden="true"></i> SoundCloud</a></li>
        <li><a href="https://www.reddit.com/user/ItzJavaCraft" target="_blank"><i class="fa fa-reddit-alien" aria-hidden="true"></i> Reddit</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="http://github.com/itzjavacraft" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> GitHub</a></li>
        <li><a href="http://stackoverflow.com/users/6125445/itzjavacraft" target="_blank"><i class="fa fa-stack-overflow" aria-hidden="true"></i> Stack Overflow</a></li>
        <li><a href="https://jsfiddle.net/user/ItzJavaCraft" target="_blank"><i class="fa fa-jsfiddle" aria-hidden="true"></i> JSFiddle</a></li>
      </ul>
    </div>
  </div>
  <hr>
  <div class="footer">
    <p class="footer" style="clear: right;">Oh, hello there. My name is Java. No, not the programming language! Well, this is awkward. Not much else to be said... uhm... enjoy your stay, I guess!</p>
    <a href="http://itzjavacraft.tk">
      <img src="/images/logo.png" alt="ItzJavaCraft" class="footer" />
    </a>
  </div>
</footer>

这是一个 JSFiddle

Answer 1

我能想到的最快解决方案是仅将 Flexbox 应用于 <div>包含您的图标/链接。这样，<div>下面将保持“未 flex ”，并将按您的预期堆叠:

footer {
  text-align: center;
}

#footer_links {
  display: flex;
}
#footer_links div {
  margin: 0 auto;
  display: inline-block;
}
#footer_links ul {
  list-style: none;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
  <div id="footer_links">
    <div>
      <ul>
        <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a></li>
        <li><a href="http://twitter.com/itzjavacraft" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a></li>
        <li><a href="http://instagram.com/itzjavacraft" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a></li>
        <li><a href="https://vine.co/u/1269681750234615808" target="_blank"><i class="fa fa-vine" aria-hidden="true"></i> Vine</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="https://youtube.com/channel/UCZhk1PN4RzBXe63bqg0GtHw" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i> YouTube</a></li>
        <li><a href="http://twitch.tv/itzjavacraft" target="_blank"><i class="fa fa-twitch" aria-hidden="true"></i> Twitch</a></li>
        <li><a href="http://soundcloud.com/itzjavacraft" target="_blank"><i class="fa fa-soundcloud" aria-hidden="true"></i> SoundCloud</a></li>
        <li><a href="https://www.reddit.com/user/ItzJavaCraft" target="_blank"><i class="fa fa-reddit-alien" aria-hidden="true"></i> Reddit</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="http://github.com/itzjavacraft" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> GitHub</a></li>
        <li><a href="http://stackoverflow.com/users/6125445/itzjavacraft" target="_blank"><i class="fa fa-stack-overflow" aria-hidden="true"></i> Stack Overflow</a></li>
        <li><a href="https://jsfiddle.net/user/ItzJavaCraft" target="_blank"><i class="fa fa-jsfiddle" aria-hidden="true"></i> JSFiddle</a></li>
      </ul>
    </div>
  </div>
  <hr>
  <div>
    <p>Oh, hello there. My name is Java. No, not the programming language! Well, this is awkward. Not much else to be said... uhm... enjoy your stay, I guess!</p>
    <a href="http://itzjavacraft.tk">
      <img src="/images/logo.png" alt="ItzJavaCraft" />
    </a>
  </div>
</footer>