Css 如何建立一个社交栏并定位它的按钮？

我正在尝试构建一个包含5个按钮的基本栏，每个按钮都由一个图标和下面描述图标的文本组成。 我希望所有的图像将在同一行和描述将在下面

    <a href="tel:036781223333" title ="call us"><img src=phone.png />call office </a>
<a href= "http://www.bgasgdhen.com/" title = "website"><img src=circle.png />link to website </a>
<a href= "advbagsgadron.vcf" title = "add to contacts"><img src=book.png />add to contacts </a>

例如，在此代码中，呼叫办公室应位于第一个img下方，链接到第二个img下方的网站，以此类推，但它会写入描述，但描述与图标显示在同一行，每个描述都位于itws图标旁边。 你能帮忙吗？ thx

这样做： 图标/链接被放置在一个列表中，HTML被清理，我添加了一些CSS来展示它的外观

保险商实验室{ 列表样式类型：无； } 李{ 显示：内联块； 边缘：1米； } 李阿{ 显示：块； 文本对齐：居中； } 李亚明{ 保证金：0自动； 显示：块； 宽度：3em； 高度：3em； }

---

我也会更改HTML。只把文本放在那里，因为图像没有语义值。使用CSS你可以显示图标，你甚至不需要一个元素。只需使用：：before伪元素

社会导航{ 文本对齐：居中； } 社会导航{ 显示：内联块； 填充：3倍； } 社会导航a：：以前{ 内容：； 显示：块； 高度：32px； 背景：urlhttp://www.phonebook.com/favicon.ico 上中不重复； } nav.social a.website:：之前{ 背景图像：urlhttp://stackoverflow.com/favicon.ico; } 导航社交卡：：之前{ 背景图像：urlhttps://en.wikipedia.org/favicon.ico; }

---

首先，这些应该在列表中，然后你应该在-tag后面加一个。请尝试添加更多信息。这可能包括您已经尝试过的内容，以及哪些内容有效/无效，以及可能帮助他人回答您问题的任何其他信息。