我的图像分别为display: block;
,text-align: center;
,width: 33%;
,但仍未居中或像33%一样。
我也尝试过width: 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;
}
<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%的宽度居中,但对宽度命令或居中没有反应。
答案 0 :(得分:4)
这可能是解决您问题的最基本方法。
if
.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%;
}
答案 1 :(得分:2)
您必须在图像中应用样式。
尝试这样的事情:
.logo {
top: 0;
display: block;
margin-top: 50px;
margin-bottom: 25px;
}
.logo img {
display: block;
margin: auto;
width: 33%;
}
对于集中式图像,它应该具有以下属性:显示块,自动边距和一些宽度。