html - 如何修复导航栏中徽标的错误对齐?
问题描述
我的网站顶部有这个导航栏,里面有公司的标志。但它似乎并没有得到中心对齐。<img src="images/onboarding/logo_webbanner.png" width="96px" ></img>
此行是徽标的代码,但它位于中心的左侧。
导航栏组件:
<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 将孩子垂直居中。
推荐阅读
- spring-data-cassandra - 通过以时间戳作为聚类列的复合键查询
- javascript - 如何从选择器中获取所有选项值并生成模式数组字符串
- asp.net - IIS 8 上的 Blazor WebAssembly - 0x8007000d
- apache-spark - 计算格式为 yyyyMM 的两个日期之间月差的最佳方法是什么。在 pyspark 中?
- c# - 在客户端请求的 TCP/IP 协议中添加帧字节(开始和结束)
- python - 找到序列的开始和结束索引的有效方法?
- angular-elements - Angular Elements - 它们是 NRWL/NX 中的库还是应用程序?
- python - 在 Windows 上安装 SQL Server 2019 后,Windows 控制台无法使用 pip 安装 Python 包
- r - 在 R 中按子组分箱
- android - 应用程序被杀死时如何向接收者用户显示收入呼叫页面