我正在尝试将导航菜单与图片的右侧对齐,并且我已经设法将文本放在我想要的位置,但我无法弄清楚如何使列表项居中,如果我是的话使用 justify content: center;
。他们排成一列并匹配到左边。
.landing {
background-image: url(http://adwallpapers.xyz/uploads/posts/72363-blonde-girl-blur-photo-4k-ultra-hd-wallpaper__celebrity.jpg);
margin-left: 40px;
margin-right: 40px;
height: calc(100vh - 0px);
background-size: cover;
background-position: center center;
}
ul {
display: flex;
flex-direction: column;
padding: 0;
align-items: flex-end;
}
li {
list-style: none;
color: white;
font-size: 25px;
position: relative;
top: 400px;
right: 50px;
}
<div class="landing">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
最佳答案
我认为没有 flexbox 会更好。我已经修改了您的 CSS 并指出了所做的更改。
.landing {
background-image: url(http://adwallpapers.xyz/uploads/posts/72363-blonde-girl-blur-photo-4k-ultra-hd-wallpaper__celebrity.jpg);
margin-left: 40px;
margin-right: 40px;
height: calc(100vh - 0px);
background-size: cover;
background-position: center center;
/* new */
text-align: right;
}
ul {
/*display: flex;*/
/*flex-direction: column;*/
padding: 0;
/*align-items: flex-end;*/
/* new */
text-align: center;
display: inline-block;
margin-right: 10px;
margin-top: 30px;
}
li {
list-style: none;
color: white;
font-size: 25px;
/*position: relative;*/
/*top: 400px;*/
/*right: 50px;*/
}
<div class="landing">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
关于html - 将列表项中心与 Flexbox 列对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43970988/