社交媒体图标水平定位的方向问题

Question

我几乎按照我想要的方式拥有我的社交媒体图标。我遇到的问题是，当我希望它们水平时，我的图标显示垂直。一旦我在代码中添加浮动文本，图标就从水平切换到垂直。如果不取出我要保留的浮动文本，我无法弄清楚如何使它们再次水平。我计划在我的wordpress网站的页脚中使用此代码，并在小部件选项中使用自定义html选项。

一旦我在图像中添加浮动文本，图标就会从水平切换到垂直。我不知道如何保持图像水平，我不想摆脱浮动文本。

如何水平排列图像？

<center>
<div title="twitter">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/eb71c669616b73376b4046d59aa72acd-full.jpg" border="0" / alt="twitter_" src="https://ibb.co/hXDMqVP" width="85" height="85">
</div>
</a>
<div title="patreon">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/7c336d8d73312b913f3cb0d3d29f924f-full.jpg" border="0" / border="0" alt="patreon" src="https://ibb.co/hXDMqVP" width="100" height="100">
</div>
</a>
<div title="ko-fi">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/afe4f098fcf4ce4781aa0a0bea7c5f5d-full.jpg" border="0" / alt="ko-fi" src="https://ibb.co/hXDMqVP" width="100" height="100">
</div>
</a>
</center>

Answer 1

center标签是过时的。用div包裹它并将其设置为弯曲

.icon-container {
display: flex;
justify-content: space-between;
}

<div class="icon-container">
<div title="twitter">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/eb71c669616b73376b4046d59aa72acd-full.jpg" border="0" / alt="twitter_" src="https://ibb.co/hXDMqVP" width="85" height="85">
</div>
</a>
<div title="patreon">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/7c336d8d73312b913f3cb0d3d29f924f-full.jpg" border="0" / border="0" alt="patreon" src="https://ibb.co/hXDMqVP" width="100" height="100">
</div>
</a>
<div title="ko-fi">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/afe4f098fcf4ce4781aa0a0bea7c5f5d-full.jpg" border="0" / alt="ko-fi" src="https://ibb.co/hXDMqVP" width="100" height="100">
</div>
</a>
</div>

Answer 2

<div>

元素是"块级元素"：

默认情况下，块

级元素占据其父元素(容器)的整个空间，从而创建一个"块"。浏览器通常在元素前后显示带有换行符的块级元素。您可以将它们可视化为一堆盒子...块级元素总是从新行开始，并占据可用的整个宽度(尽可能向左和向右延伸)。

水平显示项目的一种基本方法是将title属性直接添加到<a>元素(即"内联元素")：

内联元素是那些只占用由定义元素的标签所限定的空间，而不是中断内容的流动......内联元素不会从新行开始，只会占用所需的宽度。

下面是一个演示：

#container {
text-align: center;
}

<div id="container">
<a href="#" target="_blank" title="twitter">
<img src="" border="0" width="50" height="50">
</a>
<a href="#" target="_blank" title="patreon">
<img src="" border="0" width="50" height="50">
</a>
<a href="#" target="_blank" title="ko-fi">
<img src="" border="0" width="50" height="50">
</a>
</div>

有关更多信息，请参阅 CSS 布局 - 正常流程。

以上是一个非常简单的布局。其他更复杂的方法可能很有用，例如，如果要在屏幕上分配项目，并在它们之间留出空间。

请参阅 CSS 布局指南。

---

另请注意，代码中的 HTML 似乎格式不正确。<div>和<a>元素未正确嵌套。<img>元素具有重复的属性和错位的斜杠。而且，正如其他人提到的那样，<center>要素已经过时。

Answer 3

您可以为每个包含图像的div 添加float: left;属性。