Html 尝试将图像居中放置在视口总宽度的33%

我将图像显示为：block；，文本对齐：居中；，宽度：33%；但仍然没有像33%那样居中或行动。 我还尝试了宽度：33vw 33%的视口宽度，仍然没有运气

我尝试创建一个100%的容器，然后创建一个图像所在的div，但仍然没有解决这个问题。我有一种强烈的感觉，这是一件非常愚蠢的事情，但我已经看了太久的代码，我无法发现它。 我只想改变徽标的大小，这样手机上的人就可以看到完整的徽标，而不必向右滚动

a {
    text-decoration: none;
    color: black;
}

nav {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

.nav {
    position: sticky;
    left: 0;
    background-color: rgba(255,255,255,.8);
    border-radius: 0px;
    border: none;
    width: 100%;
    padding: 10px 0;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.item {
    color: black;
    font-weight: bold;
    text-transform: capitalize;
    width: 25%;
    text-align: center;

}

.submenu {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    align-text: center;
    position: absolute;
    padding-top: 107px;
    padding: 10px;
    font-size: small;
    left: 0;
    right: 0;
    text-transform: capitalize;
    z-index: 1;
    background-color: #2F4F4F;
    color: white;
    justify-content: left;
}

.submenu li {
    margin-left: 6%;
    width: 19%;
    padding: 5px;

}

.item.has-children:hover .submenu {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;
    flex: 1 1 calc(25% - 80px);
    color: black;
    background-color: rgba(255,255,255,.8);
}

ul {
    list-style: none;
    padding: 0;
}

.logo {
    top: 0;
    display: block;
    width: 33%;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 25px;
}

---

它应该以33%的宽度居中，但它不会对宽度命令或居中做出反应。

这可能是解决问题的最基本方法

.标志{ 显示：块； 右边距：自动； 左边距：自动； 宽度：33.33333vw； }

---

这可能是解决您问题的最基本方法

.标志{ 显示：块； 右边距：自动； 左边距：自动； 宽度：33.33333vw； }

---

必须在图像中应用样式

试着这样做：

.logo {
    top: 0;
    display: block;
    margin-top: 50px;
    margin-bottom: 25px;
}

.logo img {
  display: block;
  margin: auto;
  width: 33%;
}

---

对于要集中的图像，它应该具有以下属性：显示块、自动边距和一些宽度。

必须在图像中应用样式

试着这样做：

.logo {
    top: 0;
    display: block;
    margin-top: 50px;
    margin-bottom: 25px;
}

.logo img {
  display: block;
  margin: auto;
  width: 33%;
}

---

对于要集中的图像，它应该具有以下属性：显示块、边距自动和一些宽度。

尝试在已有边距之前将边距：0自动添加到.logo类中。。。排名也在前：0；没有做任何事情，因为。标志是一个静态元素我建议你学习盒子模型：可能重复@IvanS95 flexbox？没有任何与flexbox相关的内容。。。我提供的是框模型的链接，而不是flexbox。我的错，读错了：尝试在已有的页边距之前向.logo类添加页边距：0 auto。。。排名也在前：0；没有做任何事情，因为。标志是一个静态元素我建议你学习盒子模型：可能重复@IvanS95 flexbox？没有任何与flexbox相关的内容。。。我提供了一个盒子模型的链接，而不是flexbox。我的错，读错了：你是否实现了第二个选择器。logo img？如果没有它，图像将溢出。在您编辑之前，我已经尝试过它，现在可以工作了！感谢现在唯一的问题是，我想让它成为70vw，但当它成为图像大小的100%时，它就不再是中心的样式。徽标img是标准的响应图像样式。最大宽度：100%声明可防止图像扩展到超出其本机分辨率。这意味着，如果容器元素的宽度为500px，而映像的宽度为400px，则映像的扩展不会超过500px。当图像扩展到超出其本机分辨率时，它将变为像素化。这是最大宽度的主要原因之一：100%；。要解决您的问题，您可以提供更大的图像，也可以删除最大宽度：100%，并将其替换为宽度：100%；，虽然您的图像可能会像素化。您是否实现了第二个选择器。徽标img？如果没有它，图像将溢出。在您编辑之前，我已经尝试过它，现在可以工作了！感谢现在唯一的问题是，我想让它成为70vw，但当它成为图像大小的100%时，它就不再是中心的样式。徽标img是标准的响应图像样式。最大宽度：100%声明可防止图像扩展到超出其本机分辨率。这意味着，如果容器元素的宽度为500px，而映像的宽度为400px，则映像的扩展不会超过500px。当图像扩展到超出其本机分辨率时，它将变为像素化。这是最大宽度的主要原因之一：100%；。要解决您的问题，您可以提供更大的图像，也可以删除最大宽度：100%，并将其替换为宽度：100%；，虽然您的图像可能会变得像素化。