[英]How to fix wrong alignment of logo in navigation bar?
我的网站顶部有这个导航栏,里面有公司的标志。 但它似乎并没有居中对齐。 <img src="images/onboarding/logo_webbanner.png" width="96px" ></img>
这一行是 logo 的代码,但它保持在中心的左侧。
导航栏组件:
<div className="home-nav-bar">
<div className="margin-top-4">
<div className="flex-row width-100vw">
<div className="flex-1" style={{ maxWidth: "5vw"}} />
<div className="flex-1">
<div className="flex-row">
<div className="flex-1">
{/* <a href="/home">
<img
style= {{ width: "24px" }}
src="/images/arrow-left.png"
/>
</a> */}
</div>
<div className="flex-1">
<div className="home-nav-bar-title futura-20-300 center">
<img src="images/onboarding/logo_webbanner.png" width="96px" ></img>
</div>
</div>
{/* <div className="flex-1" style={{ textAlign: "right" }}>
<Link to="/settings">
<img
className = "settings-cog"
src="/images/cog.png"
/>
</Link>
</div> */}
<div className="flex-1" style = {{marginTop : "5px"}}>
<Link to="/home">
<div className="settings-title" style={{ color: "#FF5A66" }}>
Home
</div>
</Link>
<Link to="/programs">
<div className="settings-title">
Programs
</div>
</Link>
<Link to="/settings">
<div className="settings-title" style={{ marginRight : "10px" }}>
Account
</div>
</Link>
</div>
</div>
<div className="flex-1" style={{ maxWidth: "5vw" }} />
</div>
</div>
</div>
</div>
css:
.item {
margin-top: -12px;
border-radius: 0px;
box-shadow: none;
width: 320px;
font-size: 20px;
font-weight: 900;
text-align: center;
}
.top {
box-shadow: 0 0px 16px 2px #DDDDDD;
}
.home-nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
background-color: white;
z-index: 2;
height: 36px;
box-shadow: 0 0px 16px 2px #DDDDDD;
}
.home-bottom-nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
position: fixed;
bottom: 0;
background-color: #fff;
z-index: 2;
height: 40px;
}
.home-bottom-nav-button {
height: 44px;
width: 101px;
border-radius: 20px;
background-color: #FF5A66;
}
.home-bottom-nav-bar-title {
height: 28px;
color: #2f2f2e;
font-family: "futura-pt";
font-size: 20px;
font-weight: 300;
letter-spacing: 0.25px;
line-height: 28px;
}
.home-nav-bar-title {
height: 29px;
width:80vw;
color: #2f2f2e;
font-family: Futura;
font-size: 24px;
font-weight: 900;
line-height: 29px;
justify-content: center;
}
.home-title {
height: 28px;
width: 80vw;
color: #2f2f2e;
font-family: "futura-pt";
font-size: 24px;
font-weight: 300;
letter-spacing: 0.25px;
line-height: 28px;
}
.home-score-title {
height: 28px;
width: 51px;
color: #2f2f2e;
font-family: "futura-pt";
font-size: 20px;
font-weight: 300;
letter-spacing: 0.25px;
line-height: 28px;
}
.home-score-subtitle {
height: 20px;
width: 91px;
color: #6f6f6f;
font-family: "futura-pt";
font-size: 14px;
font-weight: 300;
letter-spacing: 0.25px;
line-height: 20px;
}
.home-subtitle {
height: 24px;
width: 60vw;
color: #424874;
font-family: "futura-pt";
font-size: 16px;
font-weight: 300;
letter-spacing: 0.15px;
line-height: 24px;
}
.home-next-session-image {
height: auto;
width: 90vw;
border-radius: 10px;
}
.home-pyramid {
width: 80px;
background-color:'pink'
}
.home-score-circle-title {
height: 29px;
color: #2f2f2e;
font-family: "futura-pt";
font-size: 24px;
font-weight: 300;
line-height: 29px;
}```
如果我理解您的标记是正确的,那么您似乎在徽标的父 div 上有弹性。 如果要将图像居中在 div 中,可以使用:
justify-content: center;
align-items: center;
如果您使用 flex-direction: row, justify-content: center 将使孩子水平居中,而 align-items: center 将使孩子垂直居中。
以百分比尝试宽度和高度,否则将调整其大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.