如何使图像与文字水平居中？

Question

我正在网站上工作，但我的图像在页脚中水平居中的效果不是很好。

当您将屏幕缩小到 620 像素或类似尺寸时，我想将文本居中。还有图像.. 对于图像，我指的是第三个 table 中的 5 个图标和第四个 table 中的图片。

如果您尝试减小屏幕宽度，您会发现除了文字之外图像并不完美。

所以我的问题是..当文本居中对齐时，如何将图像与文本一起水平居中？

这是我的页脚：https://jsfiddle.net/ThomasPereira/L7dz7d4b/

我认为我的错误在这里-->

@media screen and (max-width: 623px) {
    #footer #group {
        padding-left:0px;
        max-width:100%;
    }
    #footer {
        height:1150px;
    }
    #footer #group #button {
        text-align:center;
    }
}

Answer 1

已更新 我只是稍微编辑了你的 fiddle 并设法实现了你想要的 https://jsfiddle.net/L7dz7d4b/2/

    @media screen and (max-width: 623px) {
        #footer #group {
            padding-left:0px;
            max-width:100%;
        }
        #footer {
            height:1150px;
        }
        #footer #group #button {
            text-align:center;
        }
        #footer #group a #icon {
      width: 20px;
      height: 20px;
      margin: 5px;
            float:none;
    }
 .opmaak{
        display:flex;
        margin:0 auto;
        width:100px;
    }
    }

Answer 2

尝试制作图像 display:inline-block 而不是 float:left

嗯。喜欢：

.opmaak a img {
    display:inline-block;
    vertical-align:-10px; /* value to nicely show img along text, */
}

P.S。您应该只有唯一的 ID。如果您有两个具有相同 ID 的元素，请使用 class 而不是 id。

Answer 3

Heres a simple guide

尝试使用 classes 而不是 ids 来处理您需要多次使用的内容。使用 inline-block 非常有帮助，但请记住，如果您的 css 不好，事情会变得非常混乱。例如，2 inline-block 个元素如果一个有文本而另一个没有文本则不会正确对齐。

只是一些要记住的事情。

如何使图像与文字水平居中？

How to center images horizontally with text?

html

css

media-queries