0
イメージをテキストの下に配置するには、イメージをテキストの右側に配置しないでください。画像をテキストの下に揃える
私は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>ここで私は考えることができる最速のソリューションは、あなたのアイコン/リンクを含んでい<div>にフレキシボックスを適用することですJSFiddle
？特定の問題を解決するには、コードを提示する必要があります。 – HaukurHaf
@HaukurHafいくつかのコードで更新されました – ItzJavaCraft
[再現例]（https://jsfiddle.net/y0jjahf3/）は再現できません。 – showdev