如何使用HTML和CSS居中对齐社交媒体标签

纳菲斯·拉曼(Nafis Rahman)

嗨,我有一个问题,每次我尝试居中对齐我的社交媒体图像时,它们都会以水平列出的方式放置

这是图像的html代码

<div class="socialMediaIcon">
    <a href="http://twitter.com/nafis985">
        <img src="img/twitter.png" alt="Twitter Logo">
    </a>
    <a href="http://facebook.com/nafis.rahman3">
        <img src="img/facebook.png" alt="Facebook Logo">
    </a>
</div>

我尝试将其居中的CSS是

.socialMediaIcon img {
    width: 80px;
    display: block;
    margin: 0 auto;
 }
伊姆·盖拉夫

.socialMediaIcon li {
  display: inline-block;
}
ul {
  list-style: none;
}
.socialMediaIcon li a {
  display: inline-block;
}
.socialMediaIcon {
  text-align: center;
}
<div class="socialMediaIcon">
  <ul>
    <li>
      <a href="http://twitter.com/nafis985">
        <img src="img/twitter.png" alt="Twitter Logo">
      </a>
    </li>
    <li>
      <a href="http://facebook.com/nafis.rahman3">
        <img src="img/facebook.png" alt="Facebook Logo">
      </a>
    </li>
  </ul>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用HTML5和CSS3垂直居中对齐并对齐其他所有内容?

来自分类Dev

使用媒体屏幕在Mobile中的CSS中居中对齐文本

来自分类Dev

HTML居中对齐媒体屏幕上的按钮

来自分类Dev

使用 HTML 在社交媒体上共享图像

来自分类Dev

如何在左侧垂直对齐社交媒体图标?

来自分类Dev

在页脚HTML和CSS中将水平对齐的图像居中

来自分类Dev

尝试对齐社交媒体图标,使它们完美地居中于分隔符之间

来自分类Dev

如何使用CSS并排对齐p标签?

来自分类Dev

如何居中对齐文本?CSS

来自分类Dev

HTML和CSS。社交按钮如何移动它们?

来自分类Dev

如何:社交媒体网站

来自分类Dev

我正在尝试为要构建的社交媒体网站使用HTML图标。.如何创建独立图标?

来自分类Dev

如何使用CSS3使div居中对齐?

来自分类Dev

无法将我的社交媒体图标居中

来自分类Dev

社交媒体按钮上的 Bootstrap 居中图标

来自分类Dev

将 <iframe> 标签对齐到 HTML 和 CSS 的中心

来自分类Dev

带有版权和社交媒体图标的页脚不会垂直居中

来自分类Dev

如何使用HTML / CSS使页面布局居中?

来自分类Dev

如何使用HTML CSS将图片居中

来自分类Dev

使用 div 和带有 css 的 h1 类时如何将文本居中对齐的语法是什么

来自分类Dev

AMP页面和社交媒体

来自分类Dev

对齐并居中<textarea>文本HTML / CSS?

来自分类Dev

HTML / CSS向左对齐,但保持居中

来自分类Dev

HTML / CSS向左对齐,但保持居中

来自分类Dev

如何将标签和输入与CSS对齐

来自分类Dev

使用Swift以编程方式在UIView中居中对齐标签和图像

来自分类Dev

使用Swift以编程方式在UIView中居中对齐标签和图像

来自分类Dev

垂直居中对齐<a>标签

来自分类Dev

如何使用位图将图像分享到社交媒体?

Related 相关文章

  1. 1

    如何使用HTML5和CSS3垂直居中对齐并对齐其他所有内容?

  2. 2

    使用媒体屏幕在Mobile中的CSS中居中对齐文本

  3. 3

    HTML居中对齐媒体屏幕上的按钮

  4. 4

    使用 HTML 在社交媒体上共享图像

  5. 5

    如何在左侧垂直对齐社交媒体图标?

  6. 6

    在页脚HTML和CSS中将水平对齐的图像居中

  7. 7

    尝试对齐社交媒体图标,使它们完美地居中于分隔符之间

  8. 8

    如何使用CSS并排对齐p标签?

  9. 9

    如何居中对齐文本?CSS

  10. 10

    HTML和CSS。社交按钮如何移动它们?

  11. 11

    如何:社交媒体网站

  12. 12

    我正在尝试为要构建的社交媒体网站使用HTML图标。.如何创建独立图标?

  13. 13

    如何使用CSS3使div居中对齐?

  14. 14

    无法将我的社交媒体图标居中

  15. 15

    社交媒体按钮上的 Bootstrap 居中图标

  16. 16

    将 <iframe> 标签对齐到 HTML 和 CSS 的中心

  17. 17

    带有版权和社交媒体图标的页脚不会垂直居中

  18. 18

    如何使用HTML / CSS使页面布局居中?

  19. 19

    如何使用HTML CSS将图片居中

  20. 20

    使用 div 和带有 css 的 h1 类时如何将文本居中对齐的语法是什么

  21. 21

    AMP页面和社交媒体

  22. 22

    对齐并居中<textarea>文本HTML / CSS?

  23. 23

    HTML / CSS向左对齐,但保持居中

  24. 24

    HTML / CSS向左对齐,但保持居中

  25. 25

    如何将标签和输入与CSS对齐

  26. 26

    使用Swift以编程方式在UIView中居中对齐标签和图像

  27. 27

    使用Swift以编程方式在UIView中居中对齐标签和图像

  28. 28

    垂直居中对齐<a>标签

  29. 29

    如何使用位图将图像分享到社交媒体?

热门标签

归档