我的 html 页面中的图像被推离中心时出现问题

Question

在我的 HTML 页面中，我在页面顶部有一些社交媒体图标，并且应该在中间有一个徽标。但是，在我添加图标之后，他们将徽标稍微推到了一边。 Here's an image of what's happening

问号符号应该位于整个页面的中间（直接位于导航栏中的“更新”和“存档”之间），但它被推开了。有没有什么办法可以让logo在整个页面的中央？

在我的 HTML 我有：

    <img src="https://imgur.com/16OdDvD.png" class="sns-icon" id="ig">
    <img src="https://imgur.com/nQ2aUYu.png" class="sns-icon" id="reddit">
    <div class="center">
        <img src="https://imgur.com/hQRzG5G.png" id="headerlg">
    </div>

然后在我的 styles.css 我有：

.center {
    text-align: center;
}

#headerlg {
    padding-top: 35px;
    padding-bottom: 9px;
    width: 80px;
    position: relative;
}

.sns-icon {
    width: 30px;
    float: left;
    margin-top: 13px;
    margin-left: 13px;
    padding: 1px;
}

我也试过 justify-content: center 和 margin: auto 都没有用

Answer 1

你的源代码对我不起作用，但我在这里写了一些像你的代码，我用 flex box 解决了你的问题并添加了一些视觉样式，我希望它对你有意义。

.container {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container>div {
  width: 33%;
  height: 20px;
  background-color: rgb(216, 216, 216, 0.4);
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML & CSS</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="container">
    <div class="social-media">
      <span>instagram</span>
      <span>twitter</span>
    </div>
    <div class="logo">
      icon logo
    </div>
    <div class="put-nothing">

    </div>
  </div>
</body>

</html>

我刚刚创建了 3 div，其中 1 个包含社交媒体，另一个包含徽标，最后一个留空。它们在所有设备（手机、平板电脑、笔记本电脑）中都具有相同的宽度。

我的 html 页面中的图像被推离中心时出现问题

Trouble with image in my html page being pushed off center

html

css

alignment

centering