我的图像为 display: block;, text-align: center;, width: 33%; 但仍然没有居中或者表现得像 33%。
我也试过 width: 33vw(33% 视口(viewport)宽度)，还是不行。
我试过创建一个 100% 的容器，然后创建一个图像所在的 div，仍然没有解决它。我有一种强烈的感觉，这太愚蠢了，但我看代码的时间太长了，我无法发现它。 我只想改变 Logo 的大小，以便移动设备上的人可以看到完整的 Logo ，而不必向右滚动。
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;
}
<head>
<meta charset="UTF-8" content="width=device-width, initial-scale= 1">
<title>Graphic Design</title>
<link href="../CSS/Navigation.css" rel="stylesheet" type="text/css">
<link href="../CSS/Printing.css" rel="stylesheet" type="text/css">
</head>
<a class="logo" href="index.html">
<img src="../Images/Navigation/Intak Logo 40px High.png" alt="Home"/>
</a>
<nav>...
它应该以 33% 的宽度居中，但它对宽度命令或居中没有反应。
最佳答案
这可能是您问题的最基本解决方案。
.logo {
display: block;
margin-right: auto;
margin-left: auto;
width: 33.33333vw;
}<img class="logo" src="https://via.placeholder.com/600x600/fc0">带有链接。
.logo {
display: block;
margin-right: auto;
margin-left: auto;
width: 33.33333vw;
}
.logo img {
display: block;
height: auto;
max-width: 100%;
}<a class="logo" href="#">
<img src="https://via.placeholder.com/600x600/fc0">
</a>关于html - 尝试将图像居中显示为总视口(viewport)宽度的 33%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55800586/