如何在导航中居中?我想列出内容,以" nav"和li的高度为中心,与导航的高度相同。这是我的第一篇英文文章,请理解。
header
{
width: 100%;
color: white;
text-align: center;
font-size: 4.5vw;
}
nav
{
background: #3095d3;
width: 100%;
text-align: center;
display: inline-flex;
}
ul
{
list-style-type: none;
margin: 0;
}
ul > li
{
padding: 1vw;
float: left;
font-size: 2.5vw;
}
li:hover
{
background: #50B5F3;
}

<header>
Anon
<nav>
<ul>
<li>cont1</li>
<li>cont2</li>
<li>cont3</li>
<li>cont4</li>
</ul>
</nav>
</header>
&#13;
答案 0 :(得分:1)
您只需将if let annotationData = UserDefaults.standard.object(forKey: "pinned_annotation") as? Dictionary {
guard let lat = annotationData["lat"], let long = annotationData["long"] else { return }
let coordinate = CLLocationCoordinate2D(latitude: lat, longitude: long)
}
添加到margin: auto
元素即可。
答案 1 :(得分:1)
由于您在inline-flex
上使用nav
,因此您只需添加justify-content: center
。
虽然看起来nav
可能只是flex
,但您也可以删除width: 100%
。
header {
width: 100%;
color: white;
text-align: center;
font-size: 4.5vw;
}
nav {
background: #3095d3;
width: 100%;
display: inline-flex;
justify-content: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul > li {
padding: 1vw;
font-size: 2.5vw;
float: left;
}
li:hover {
background: #50B5F3;
}
<header>
Anon
<nav>
<ul>
<li>cont1</li>
<li>cont2</li>
<li>cont3</li>
<li>cont4</li>
</ul>
</nav>
</header>