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>将保持“未弯曲”并按预期堆叠：

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>

将图像对齐文本

1 个答案: